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!
Related
I deployed my React App on AWS Amplify. The problem is it doesn't access the sources in Public folder(e.g. images, models). I heard I can add rules to Rewrite and Redirect on AWS Amplify, but I have no idea how to make the rule.
This is my folder layout:
The rules in AWS Amplify:
How do I make the rules? Could someone help me out?
Sorry, this is sort of a 'shotgun' answer, but I suspect one of these should move you forward.
This issue may have more to do with your build tools than Amplify.
In my vite spa, I put my favicon.svg, logo.svg in my /src directory. The only thing in my public dir is an image referenced in an email html - and for that it seems I hardcoded a fully qualified path.
I have an old CRA SPA, and I see things like this:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
And you may need to expose files via manifest.json
{
"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"
}
Rewrites/redirects probably aren't the reason images aren't working. But if everything appears to work as long as you nav from your homepage, but breaks if you reload or deep link - that's where the rewrite rules will help.
The doc is on this page. From the doc:
Redirects for single page web apps (SPA)
Most SPA frameworks support HTML5 history.pushState() to change
browser location without triggering a server request. This works for
users who begin their journey from the root (or /index.html), but
fails for users who navigate directly to any other page. Using regular
expressions, the following example sets up a 200 rewrite for all files
to index.html, except for the specific file extensions specified in
the regular expression.
Source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
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
I have a react application that works fine locally. However after I deploy to Azure Web App I get following error in console:
https://xxx.azurewebsites.net/manifest.json 404 (Not Found)
I can see the purpose is when people install the app on a mobile, then REACT renders differently dependent on the devise. I can also see it is located in the index.html file:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
As my app is a web site does this file has any effect? Can I just delete it or should I try to solve the error? And if yes how?
Are you using create-react-app?
The manifest makes only sense when you want that your users can install your app so it works without an internet connection e.g. Thats in the end a Progressive Web App. So for you it's probably fine to just remove the line.
(under which path does your app serve? Maybe you have to specify a base path: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
have you tried this?
go to angular.json
add manifest.json location in assets
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
restart dev server using
ng serve
For production apps, you have to target build for the public in firebase.json like the following:
{
"hosting": {
"public": "build", // Here you have to make changes.
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
}
}
i was trying to deploy my react SPA on Firebase, but got only blank page with such console error:
"Uncaught SyntaxError: Unexpected token <"
chrome console
chrome_elements_blank
to exclude third part libraries I created new React-app to deploy. and got exactly same problem.
terminal log:
part1
part2
part3
part4
anybody knows how to fix this?
link to firebase deployed create-react-app start page
Code from firebase.json
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [
{
"source" : "*",
"destination" : "/index.html"
}
]
}
}
Your main.js contains the page html data again.
<!doctype html><html lang="en"><head>....
As the browser loads the JS file and tries to interpret it, it fails, as HTML is clearly not javascript. It tries to communicate its confusion with "Oh I found a < but that is not what I expected".
You seem to have configured a default route for your server and each and any request returns your index.html.
I noticed in one of your screenshots, that you said "yes" to "Rewrite all urls to index.html" - it does exactly that. You should not activate that, as ALL you requests will then always return the index.html.
Please have a look in your firebase.json file. You will find the instructions for hosting and routing in there.
API Docs are here:
https://firebase.google.com/docs/hosting/full-config
You might want to have a special look into the redirects array, looking like this:
"redirects": [
{
"source" : "*",
"destination" : "/index.html"
}
]
Here you tell the server to redirect all traffic to /index.html. Delete the redirect entries, redeploy and all will be well.
So this redirects section will most probably solve the issue:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": []
}
}
This also can be an issue in the package.json file, if you have set the attribute homepage
{
"name": "project-name",
"homepage": "https://project-url",
"version": "0.1.0",
}
to solve this issue remove the homepage attribute.
thanks everyone for quick reply. problem was solved with adding "redirects":[] to firebase.json like this:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
100% Working Example.
Solved Blank Page Error in React App Hosting in Firebase .
You can read this blog
Host Your React Web App in few minutes.
Command runnning in Wrong sequence =>
firebase login
firebase init
firebase deploy
npm run build
Command runnning in Correct sequence =>
firebase login
firebase init
npm run build
firebase deploy
My solution was to simply change firebase.json to use the build folder instead of public:
enter image description here
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"
}
}