I'm trying to set a pipeline that automatically creates a review build for my create-react-app which I can review from GitHub.
This is my app.json file:
{
"name": "harry100-exercise",
"scripts": {
},
"env": {
},
"formation": {
"web": {
"quantity": 1
}
},
"addons": [
],
"buildpacks": [
{
"url": "heroku/nodejs"
}
]
}
I have created a pipeline and enabled auto deploying for the master branch.
But everytime I create a pull request on github, I have to manually click create review app on heroku to view the review app
Any help on this?
Make sure you don't have "Wait for CI to pass" checked on the Review Apps setting page for the pipeline you are editing.
Related
I created a simple react application using npx create-react-app and made minor modifications which looks like this initially.
Initial Page
I then build it and deployed it to S3 bucket. I have enabled static website hosting, enabled public access and set bucket policy as
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::s3-demo-react/*"
}
]
}
But the S3 bucket url displayed Blank White Screen like this
White Screen on Initial Deployment
I researched and came up with answer to add homepage to my package.json. My Package.json looks like this after the change.
{
"name": "s3-app",
"homepage": "./",
"version": "0.1.0",
"private": true,
I build the project and the asset-manifest.json inside build file has following code
{
"files": {
"main.css": "./static/css/main.073c9b0a.css",
"main.js": "./static/js/main.d4f30fdf.js",
"static/js/787.668da4e5.chunk.js": "./static/js/787.668da4e5.chunk.js",
"static/media/logo.svg": "./static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg",
"index.html": "./index.html",
"main.073c9b0a.css.map": "./static/css/main.073c9b0a.css.map",
"main.d4f30fdf.js.map": "./static/js/main.d4f30fdf.js.map",
"787.668da4e5.chunk.js.map": "./static/js/787.668da4e5.chunk.js.map"
},
"entrypoints": [
"static/css/main.073c9b0a.css",
"static/js/main.d4f30fdf.js"
]
}
I redeployed the application but the same issue persist.
Still the whitescreen with css and js 404
I watched few videos on deployment where all of them hosted their site even without specifying homepage in package.json and it worked as expected for them. Am I missing something here?
I'm working on a React application inside my NX Workspace.
Now I want to add sentry to my project. I already have a deploy configuration in my project.json. But I'm struggling with adding the step to upload the source maps.
Here is my project.json
"deploy": {
"executor": "nx:run-commands",
"options": {
"parallel": false,
"commands": [
{
"command": "nx run my-app:build:{args.target}",
"forwardAllArgs": true
},
{
"command": "echo Run {args.target} deployment on {args.server}",
"forwardAllArgs": true
},
{
"command": "rsync -avz --progress --delete dist/apps/my-app/ {args.user}#{args.server}:{args.path}",
"forwardAllArgs": true
},
{
"command": "echo my-app deployed to {args.target}",
"forwardAllArgs": true
}
]
},
"configurations": {
"production": {
"args": "--target=production --user=user --server=myserver.com --path=path/to/app"
}
}
}
Is there any example of how to perform the upload of the source maps using a nx workspace? Or do I have to create a custom script that handles everything and put it into my project.json as the second command (after build, before deploy).
Also, I'm not sure how to handle the version number of my application as NX does not provide a way to define version numbers for each application inside the workspace.
You'll have to create a custom webpack config on the Nx project: https://nx.dev/recipes/other/customize-webpack
and then follow the instructions on how to setup it on Sentry using webpack:
https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/webpack/
Your custom webpack should look like something like this:
const {merge} = require('webpack-merge')
const SentryWebpackPlugin = require('#sentry/webpack-plugin')
const nrwlConfig = require('#nrwl/react/plugins/webpack.js')
module.exports = (config) => {
// merge config from #nrwl/react first
nrwlConfig(config)
return merge(config, {
devtool: 'source-map', // Source map generation must be turned on
plugins: [
new SentryWebpackPlugin({
org: 'orgId',
project: 'projectId',
// Specify the directory containing build artifacts
include: './build',
// Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
// and needs the `project:releases` and `org:read` scopes
authToken: process.env.NX_SENTRY_AUTH_TOKEN,
// Optionally uncomment the line below to override automatic release name detection
// release: process.env.RELEASE,
}),
],
})
}
Please notice that unfortunately this is not a final answer, because with this I can upload the artifact, but the source maps are still not working on Sentry and I don't know why yet - but maybe this can be helpful somehow to you.
At the moment play store says "Remove the request for location permissions from your app" but I am not using location services anywhere in the app at the moment.
I am already set the "permissions": [] in app.json file.
app.json
"android": {
"package": "com.xxxx",
"versionCode": 1,
"permissions": [],
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
}
How can I fix this?
Delete node_modules
Delete package-json.lock
Reinstall all: npm install
Source: https://forums.expo.io/t/remove-the-request-for-location-permissions-from-your-app/41488/50
My problem is
when I deploy new version react web to production
some user browser display old version from previous deploy
My user have to press ctrl+f5 for clear cache browser then I think which bad solution
please suggest best solution for me thx bro.
This could be because your web server is setting a cache control response header, which is set to a large value. Could you check the value in devtools?
A simple explanation of what cache control does is it tells the browser that the browser can use the cached resource upto n minutes. So only after n minutes will the browser send a new request for the resource.
Since you have a react app (a web app), the browser requests for index.html, and it will subsequently fetch the js bundle for your react app.
When you push an updated version, the browser doesn't know that there is an update. Since the index.html was cached, it continues to use it. Until the cache time expires, and then it will fetch again and this time it will get the latest js bundle.
Based on your server, you will need to figure out how to set the cache-control header for index.html to be of value no-cache. Here is an example of how I set it up in firebase hosting,
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "/service-worker.js",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
},
{
"source": "/index.html",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
},
{
"source": "/static/**/*",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Since create react app automatically configures the webpack build to generate static files with different hashes in the filename, it is fine to set a large cache value for it.
That occurs because, by default, the service workers do cache, so you should check your react project index.js file and check to see if services workers are registered. serviceWorker.register().
If it is registered then Unregister the service worker serviceWorker.unregister().
The above being quite drastic as a method, since it could affect your user experience what is recommended is that you configure your PWA to suit your particular caching needs. Follow this resource "https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker" for more about playing with service workers.
In case you need caching for your application, your backend sends appropriate response headers.
I am using sencha cmd 6 and trying to build native app with help of -
https://docs.sencha.com/cmd/6.x/cordova_phonegap.html
I have generated Ext 6+ universal application using following command:
sencha -sdk /path/to/Framework generate app MyApp /path/to/MyApp
Then I have added following code in app.json -
"builds": {
"classic": {
"toolkit": "classic",
"theme": "theme-triton",
"sass": {
// "save": "classic/sass/save.json"
}
},
"native": {
"toolkit": "modern",
"theme": "theme-cupertino",
"packager": "phonegap",
"phonegap": {
"config": {
"platforms": "ios android",
"id": "com.mydomain.MyApp"
}
}
}
}
But after running sencha app build android, I am getting following exception -
BUILD FAILED
java.lang.NullPointerException
at org.a
pache.tools.ant.helper.SingleCheckExecutor.executeTargets(SingleCheckExecutor.java:38)
Also as per suggestion in Developing a PhoneGap application from sencha doc, i have modified app.json with following code -
"builds": {
"native": {
"packager": "phonegap",
"phonegap" : {
"config": {
"platforms": "ios android",
"id": "com.mydomain.MyApp"
}
}
}
}
But after this, following exception is coming on my console -
Failed to resolve dependency Ext.app.Application for file MyApp.Application
BUILD FAILED
com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.app.Application
I know this is a late answer, but it might help someone else landing on this page.
To resolve the dependency, we need to include the toolkit and theme in our build profile:
"native": {
"toolkit": "modern",
"theme": "theme-cupertino",
"packager": "cordova",
"cordova": {
"config": {
"platforms": "android",
"id": "com.mydomain.NewApp"
}
}
}
In context, the build profile should look like:
Please find the answer to this question on following link -
https://www.sencha.com/forum/showthread.php?304530-Unable-to-create-Native-app-using-command-sencha-app-build-native