I am trying to deploy my react app to Firebase (using firebase-tools).
The app was generated using this generator (which has deployment instructions in the readme). I followed them, but they didn't flag that Firebase overrides the index html, so they initial step replaced my html in the build file with the Firebase override. I copied my src/index.html back to the build file and re-ran the init, build and deploy calls.
I have an intercom script on the home page - the only part of the page that renders is the intercom icon. The rest of the page is blank.
I have seen this post. Like this user, I had to remove the predeploy script from my firebase.json because it was generating eslint errors.
The facebook create-react-app advice for Firebase hosting is to add an additional script to the firebase.json with:
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
],
I also tried this, but it doesn't change anything.
I tried removing, reinstalling npm and then cleaning the cache (in the functions folder). I have noticed that reinstalling node modules does not result in a functions/node_modules/eslint folder. I'm not sure why.
Others have suggested chrome/devtools/application/clear storage/clear site data. I have tried it but nothing changes.
Some posts attribute the problem to firebase-tools - although more recent posts suggest that the error that gave rise to that solution has now been remedied.
Has anyone found a solution for this problem?
In firebase.json - change public from 'build' to 'dist'
"hosting": {
"public": "dist",
Related
I have a ReactJS project that uses Firebase for the back-end and I used Firebase Hosting to host it, at first it worked and everything seemed fine but when I tried to access the app 1 hour later it is blank. In windows browser it doesn't show any error in console but on Ubuntu VM is says Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
When I saw that I tried running the project locally but it works fine, no such error appears. The dotenv file where I store the key hasn't been changed at all and the fact that it runs locally really throws me off and I can't understand why this error occurs. Is it something regarding deployment? I also activated the GitHub actions but I deployed the app using npm run build and firebase deploy, dunno if it matters but maybe might be a hint.
Also this is the firebase.json file:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I noticed this happens to me when I have Github Actions created to deploy on-commit but also have a .firebase/hosting-*****.cache file which is not yet committed / deployed to the repository.
Try committing and deploying that hosting cache file to see if it resolves the issue.
Otherwise try dropping the .firebase and ./build folders entirely and re-build, commit and deploy again.
Also regarding your firebase.json file, it looks fine.
I hope one of these two suggestions helps!
I am trying to deploy my react app on firebase but i get this image shown all the time.
Steps I did
firebase init
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
What do you want to use as your public directory? - public
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) - No
? Set up automatic builds and deploys with GitHub? (y/N) - No
File public/index.html already exists. Overwrite? (y/N) - No
Then I get `✔ Firebase initialization complete!
firebase deploy
then I get `✔ Deploy complete!
when i check the URL mentioned I see the message as shown in the screen shot Firebase Hosting Setup Complete.
When I also tried changing the path for public to "public": "public/firebase-auth-test",in Firebase.json file
{
"hosting": {
"public": "public/firebase-auth-test",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Definitely I am doing something wrong but unable to figure out.
this is my project structure if that helps
Please provide more details about your react project build.
i did a small extercise project to deploy a vue js application and you need to proper build your frontend project and then call the firebase hosting deploy.
Check the package.json and other relevant files to fix your setup.
Trying to deploy my react app on firebase. The app gets deployed, but when links are clicked, it returns a 404 page.
I already logged into Firebase through the cli. Used firebase init:
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File build/index.html already exists. Overwrite? No
With npm start the application runs perfectly normal, but once I npm run build into firebase init and firebase deploy, it returns the login page properly, but the other pages are returned as 404 pages.
Firebase.json:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
My solution:
So the problem was that /home got a 404 page. But it didn't when I used firebase serve. What I did was do the steps again and made sure the build files were all valid by running npm start into npm run build. Than I deployed it again and when I got the 404 page, I just refreshed and after that it's been working ever since.
Might have something to do with the deployment needing time to route everything properly, I'm not sure. But refreshing the 404 page did the trick for some reason.
try :
copy code index.html outside "build" folder and paste into index.html inside "build" folder. ( the one inside should be the same as the other one)
if it didn't work :
1 - delete your .firebase folder. and init it again using firebase init
and set the same configuration , then reload the website.
Now i ran into such a time consuming error. My CSP policy includes errors and i've tried to remove them but all in vain.
Its a reactjs running on Heroku under an expressjs application. So my folder structure is;
ExpressApp
|-client_folder
|-Reactjs-App
I use a react-csp npm-package to set the CSP policy and actually confirmed that its writing the policy on heroku post-build. React-csp tells us to create a csp.json file and mine looks as follows.
{
"prod": {
"default-src": "'self'",
"script-src" : ["'self'"],
"font-src":["'self'", "*" ],
"style-src": [ "'self'", "https://*.googleapis.com", "'unsafe-line'" ],
"connect-src": ["'self'", "*"],
"img-src" : ["'self'", "*"]
}
}
After i upload the app with git push heroku master, and visit the site, i see it loaded without any styles. And when i check the console, i see this snapshot.
I'm using Material-UI in my project plus all its fonts but it can't seem to include everything i need in the CSP policy. I really need help because i've been stuck on this problem for a while now
it's unsafe-inline not unsafe-line
Errors in the console you showed said that you use wrong token 'unsafe-line' in the style-src directive. Change in to 'unsafe-inline'.
Note that single quotes are mandatory for 'self' and 'unsafe-inline'.
I'm trying to update a react.js site that has been deployed to firebase. The updated content cannot be accessed without using an incognito window or using Dev Tools > Application > Clear Storage > Clear Site Data.
I'm sure this is a problem more strongly related to Firebase Hosting than React, but there seems to be potential interference between React's service-worker.js file and Firebase. Therefore, I have tagged React for completeness.
React Version: 16.8.6
Firebase CLI Version: 7.1.0
My steps are:
change code
$ npm run build
$ firebase serve --only hosting || firebase deploy --only hosting
visit .web.app or localhost:5000
Expectation: I will see the site with the new changes
Reality: I see the old site, without the new changes
Research and attempted solutions:
Setting the Cache-Control Headers
I have tried setting the Cache-Control headers to "no-cache" for service-worker.js in my firebase.json file.
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]},
This is clearly mentioned in the Create React App deployment documentation here:
https://facebook.github.io/create-react-app/docs/deployment
And in numerous Stack Overflow questions, such as the one here:
Firebase hosting - force browser to reset cache on new deploys?
Unfortunately, the problem persists, even when my firebase.json file is as shown below. This has led me to believe that there may be a new, more recent issue.
Fiddling with the Service Worker:
I have also done research around the service worker itself. It is currently set to 'unregister', but I have set it to 'register' and deployed multiple times with no noticeable change.
I am unsure whether it must be set to 'register', given the advice in #1 above.
****firebase.json****
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
}
}
****/src/index.js****
.....
const store = configureStore();
....
serviceWorker.unregister();
****directory structure****
/
firebase.json
firebase.src
build/
/static
service-worker.js
index.html
....
....
In the end neither Reactjs nor Firebase Hosting was the source of the problem. I'm just posting this incase someone is in a similar situation and doubts the configuration above, its the correct one, use it.
Redux-Persist's Persist Gate was not working as expected, causing the app to have mini-crashes every time it was redeployed. The crashes occurred before things like the version number could be updated, making the site look like it hadn't received the update.
Clearing the cache would solve the Redux-Persist problem, as it clears the data in the local storage, but this made me think it was a browser cache issue when it wasn't.
If you're using Redux-Persist & Persist Gate and seeing a very similar issue, take a good look at whether Persist Gate is allowing components to render before rehydration. I solved it by using the _persist object in Redux as a flag
In case someone has the issue. I resolve it by removing the .firebase folder at my root folder and add it to my .gitignore.
It keep in cache the previously build version for making deployment faster.
I got some trouble with multi-sites configuration.