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?
Related
My firebase hosted page is rendering a blank page. The console says there are some problem in manifest.json. Can anyone please help in figuring it out.
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
The errors in console are
I was able to debug and solve the issue, actually there was some misconfiguration in the firebase installation.
Deleted firebase.json
run firebase init
Set the deploy target as from https://firebase.google.com/docs/cli/targets
firebase target:apply TYPE TARGET_NAME RESOURCE_IDENTIFIER
Where the parameters are:
TYPE — the relevant Firebase resource type
For Firebase Hosting sites, use hosting.
TARGET_NAME — a unique name for the Hosting site that you're deploying to
RESOURCE_IDENTIFIER — the SITE_ID for the Hosting site as listed in your Firebase project
For example, if you've created two sites (myapp-blog and myapp-app) in your Firebase project, you could apply a unique TARGET_NAME (blog and app, respectively) to each site by running the following commands:
firebase target:apply hosting blog myapp-blog
firebase target:apply hosting app myapp-app
Then created deploy target in the array of firebase.json
{
"hosting": [ {
"target": "blog", // "blog" is the applied TARGET_NAME for the Hosting site "myapp-blog"
"public": "blog/dist", // contents of this folder are deployed to the site "myapp-blog"
// ...
},
{
"target": "app", // "app" is the applied TARGET_NAME for the Hosting site "myapp-app"
"public": "app/dist", // contents of this folder are deployed to the site "myapp-app"
// ...
"rewrites": [...] // You can define specific Hosting configurations for each site
}
]
}
{
"storage": [ {
"target": "main", // "main" is the applied TARGET_NAME for the group of Cloud Storage buckets
"rules": "storage.main.rules" // the file that contains the shared security rules
}
]
}
The I used,
npm run build
6. Then run,
firebase deploy
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 Firebase for the first time and I deployed a react app I know to be working and have hosted on github pages. I followed the instructions provided by Firebase docs and deployed the app to their website. On loading the website I am greeted with a blank page.
the link: https://monsterpwa.web.app/
the firebase.json file:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The previous posts on here are all bout the public sections being changed to build. Other then that I could not find anyone else with a similar question.
The console logs and error that there is an unexpected token '<' in line one column 1, but I also cannot see that.
The manifest file:
{
"short_name": "Monster App",
"name": "Monster App D&D Spells and Items",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "/public/media/800x800.png",
"type": "image/png",
"sizes": "800x800"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#2d4059;",
"theme_color": "#2d4059",
"orientation": "portrait-primary"
}
build
Build
--> Media -- > *empty*
--> static -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.
asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js
Kind regards,
Snow
The issue is that you've configured your app to look for assets in a /MonsterPWA directory but that doesn't appear to exist.
For example, your index.html file has
<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>
but the file is actually available at /static/js/main.3267ab84.js.
Your rewrite rule is catching all non-existent file requests and returning index.html, hence the warnings about <.
Check your homepage configuration in package.json and / or your PUBLIC_URL environment variable.
If you check the JavaScript console of your browser it shows there's a problem loading the CSS.
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".
Uncaught SyntaxError: Unexpected token '<'
From looking at the Network tab, we can see that it is loading this URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css, but that is returning HTML (due to your rewrite rule).
Make sure that your CSS is generated to build/MonsterPWA/static/css/main.7bf83f0f.css, since that's where Firebase Hosting looks for it.
Edit: a quick check shows that the CSS actually exists at https://monsterpwa.web.app/static/css/main.7bf83f0f.css so at build/static/css/main.7bf83f0f.css.
Do the following:
run the command: npm run build
check firebase.json file to ensure it says "public":"build".. if not make the change
run the command: firebase deploy
Go grab a coffee!
The build process of create-react-app (yarn run build) deletes the old static JS file before building anew. When deployed to Firebase Hosting, the old JS files are not included and are no longer served.
However after visiting the old version the Service Worker (built by sw-precache and sw-precache-webpack-plugin, included by default in CRA) has cached the old HTML, which includes the old JS file, which is no longer served, so I get a white screen and an error in the console, which is only fixed by clearing cache and reloading.
Am I doing something wrong?
The issue was that my Cache-Control headers were too short, meaning that my JS file wasn't being cached for long enough, causing the browser to re-request it upon a reload and not find it until the Service Worker updates.
Resolution: have long Cache-Control headers
I resolved this slightly differently to Marks answer.
Within your firebase.json file you need to make sure the Service Worker and the index.html file aren't cached. For me it was the index.html being cached which was the main issue.
Webpack changes the chunks name with each build and removes the previous version from /build. Therefore when they don't get uploaded and your browser looks at the cached index.html file it causes the white screen and the error.
I ended up with the following in my firebase.json file. Hope that helps
{
"hosting": {
"public": "build",
"headers": [
{
"source": "/service-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-store"
}
]
},
{
"source": "/index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-store"
}
]
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
}
}
Structure of my Application:
In my app.json file I did following configuration for pointing to index.jsp file
"indexHtmlPath": "../../iris_app.war/WEB-INF/views/jsp/app/index.jsp",
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": {
"path": "index.jsp",
"enable": true
},
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
When I refresh my app using sencha app refresh it updates classic.json file
With following paths
{"paths":
{
"Dimension":"../../../../../iris_s.war/regshoapp/app/view/components/popups/SelectDimensionsWindow.js",
"Ext":"../../../../../iris_s.war/ext/classic/classic/src",
"Ext.AbstractManager":"../../../../../iris_s.war/ext/packages/core/src/AbstractManager.js",
"Ext.Ajax":"../../../../../iris_s.war/ext/packages/core/src/Ajax.js"
….etc.
When I deployed this application on server and run on browser then I use this
url
localhost:7001/iris_ops_app/
When I run application on browser it throws file not found error on console for each Ext File which is mentioned in “classic.json” file but these files exist under “http://localhost:7001/iris_ops_app/regshoapp” path.
Please let me know how can I resolve this path issue on browser. Actually “iris_s.war” should be replaced by “iris_ops_s/regshoapp” in “classic.json” file only then it will resolve all paths.