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"}]}
]
}
}
Related
I've built a nextjs app, with npm run build && npm run export and deployed to firebase using firebase deploy command. Prior to that, I've used firebase init in my project folder with just using the default options eg. not a single page application.
After I go and visit my project in firebase provided url however, I see the home page which is index.html, but whenever I use any other slug it throws a 404. Why this is happening ? I`ve included my firebase.json file, in case it might help.
firebase.json
"hosting": {
"public": "out",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
For everybody that wants to deploy a statically exported Next.js app to Firebase hosting:
You would have to add "cleanUrls": true to the hosting configuration in firebase.json like so:
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
Without the "cleanUrls" configuration, the user would have to navigate to
https://example.com/login.html so that Next.js routes to the login page for example. With the parameter, a web request to https://example.com/login would work.
With the rules you have Firebase Hosting serves the exact file that the user requested.
To rewrite other/all URLs to your index.html, you'll need to add a rewrite rule to your firebase.json. A typical rewrite rule for single-page applications may look like this:
"hosting": {
// ...
// Serves index.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
If anyone is still looking for this, this is what fixed it for me:
I used dynamicLinks as stated in the firebase hosting docs for the rewrites like so in my firebase.json file:
{
"hosting": {
"public": "out",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
}
}
This should allow dynamicLinks to start at ("https://CUSTOM_DOMAIN/{dynamicLink}").
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!
I just started to build a Single-Page App on Firebase Hosting using AngularJS framework. I have run firebase init and chosen to rewrite all urls to /index.html as shown below:
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
I have my partial view templates stored in the following folders:
public/templates/home/dashboard.html
public/templates/courses/default.html
My Angular routings are working correctly and have my public/index.html checks for authorized access, including those partial views, and redirect the user to login view if the user has not been authenticated.
However, when I try to paste the URL of my template HTML files directly onto the browser address bar, Firebase does not redirect it to /index.html:
http://localhost:5000/templates/home/dashboard.html
http://localhost:5000/templates/courses/default.html
All the above template files are loaded on the browser and viewable by any unauthorized users who know the URLs of these template files. I have tried to add the following rules to my firebase.json file but none of them work:
Test #1:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/templates/**/.*",
"destination": "/index.html"
}
]
Test #2:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/templates{,/**}",
"destination": "/index.html"
}
]
NOTE: I did restart firebase serve for every attempt, but I'm not sure if the cache will affect this type of testing. I also don't know how to clear the server cache either.
My questions are:
What is the correct way to write the url rewrite rule in order to redirect users to /index.html when direct accessing to these partial view templates?
If there is no way to prevent direct access to partial view templates through the Firebase url rewrite rules, is there any other way that I can prevent this for security purposes?
Firebase hosting will serve static content with priority above dynamic rewrites. See this hosting order.
If you don't want those views accessed directly, you could move them to a cloud function and setting up your hosting to reroute "templates" to serve that cloud function. Then you can configure your cloud function to provide/deny access as needed.
Use redirects instead of rewrites
"hosting": {
"redirects": [ {
"source": "/foo",
"destination": "/bar",
"type": 301
} ]
}
Add ** to source to append destination with additional URL string.
E.g.
"hosting": {
"redirects": [ {
"source": "/foo**",
"destination": "/bar",
"type": 301
} ]
}
Results in /foo?var=bar redirecting to /bar?var=bar
See Configure redirects for more info.
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
I have a react app that uses react-router with a Router that looks like:
<Router>
<div>
<Route exact path="/" component={Homepage} />
<Route path="/map/:uid" component={Userpage} />
<Footer />
</div>
</Router>
The app is hosted using Firebase hosting.
If I open my website and click around such that the router takes me to /map/uid, it loads fine. But if I close the browser and then try to explicitly navigate to <domain>/map/<known uid>, I get a "no page found" page from Firebase. This is my first time using react-router.
Update #1
I have updated my firebase.json to:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I no longer receive the "Page not found" page; however, the content of my react app never loads, and I notice in my console an error:
Uncaught SyntaxError: Unexpected token <
Update #2
I now understand why I am getting the error. Looking at the Sources tab in Chrome dev tools, my static/ folder has a strange name (static/css rather than static) only when I directly navigate to /map/{known uid}. When I navigate to the home page, all loads fine.
This explains the error. I am still not sure how to fix.
For me I could see the root url but other routes like "/pricing" were giving me a 404. I added this to my firebase.json file and now it works. Also make sure firebase/auth is allowed to work on the domain. There is a setting in the auth section of firebase.
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],
My full firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
}
}
Late answer, but I'm facing with the same issue. I solved this with 2 steps:
update firebase.json like this
{
"hosting": {
"site": "myproject",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
set the base url in index.html like this
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
.
.
.
Late to the party, but try removing the "homepage" key from your package.json (or making sure that it is correct relative to where the homepage is stored.
Late answer, but it solved the problem for me:
When doing firebase init it will ask whether it will be Single Page App or no. Default answer is No, however, just choose Yes and it will work.
You're getting this error because of client-side routing. (Deep inside React)
When building the react app in the build(folder) you see only one
index.html file.
when you hit URL with YOUR_DOMAIN/map Now firebase is trying fetch
build->map->index.html but is present in your build folder.
So you can do
Are you can use react-router-dom. After building application build folder ,
index.html you can mention <base href="/"/>.
Try setting the cleanUrls property to true.
See Firebase docs for more info
"hosting": {
// ...
// Drops `.html` from uploaded URLs
"cleanUrls": true
}
What about specyfying the basename in Router? Something along this:
<Router basename='/map/5AJA3RefFuTZ8z4Gn6BjMgZRgPZ2'>