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!
Related
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.
I have a little web app using Firebase and React.
Locally it runs on
http://localhost:3000/
and has a couple of subpages like:
http://localhost:3000/login
http://localhost:3000/manage
All is OK so far. Then I upload my page to the server (as I have already done a few times now), running:
npm run build
firebase deploy
I can at this point access the app on the server, as expected using some link like:
https://myapp.web.app/
But I hit problems hereafter, trying these URLs (for some subpages) in the browser:
https://myapp.web.app/login
https://myapp.web.app/manage
I get this result, showing that some pages must be missing:
404
Page Not Found
The specified file was not found on this website. Please check the URL for mistakes and try again.
Why am I seeing this?
This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.
I have checked my firebase.json file that this line is present in the "hosting" section:
"public": "build",
Knowing that, is there some possible issue that an experienced Firebase/React user would immediately think about and that I may be missing?
Your problem is probably because you init project and set it as it is not SPA.
Set up your firebase.json file like this:
{
"hosting": {
"target": "This is when you need target",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Most important for SPA is "rewrites" section. When you open home page using browser request looks like this example.web.app/index.html even if you wrote example.web.app and when you request example.web.app/manage request looks like example.web.app/menage/index.html And in reallity you don't have this document so you need to setup hosting to rewrites all request to this one index.html document.
I am trying to setup a 2 brand new Firebase projects with Firestore, Functions, Storage, and Hosting for both Production and Development environments. I started with deleting the references to the old firebase project: both firebase.json & .firebaserc. I then ran $ firebase init to setup Hosting, Functions, Storage, and Firestore using the test Firebase project. I then setup Firebase aliases with $ firebase use --add to switch between the two projects within one React.js project. I npm built and am attempting to deploy with: $ firebase deploy --project:test, but the hosting keeps trying the same last file and fails with: Error: Task 5fcd... failed: retries exhausted after 6 attempts..
I've seen some Stackoverflow answers that relate to the servers being down temporarily, but I do not see any server problems on their side (https://status.firebase.google.com/) and this has persisted before. On another project I have worked on, I was trying to deploy to 2 hosting targets on the same Firebase project, but one was failing and the other was working fine, and I was getting this same error (I never found a solution to that other than not using multiple targets.)
What else can I test to get this working? Is it something inside my React.js code base? (I recently deployed to my past project) Maybe it has to do with my Firebase setup process? Or there is still a connection to the old Firebase project? I don't know what to look at next to fix this. Any direction would be great, thanks!
Ps: Something weird that might not be connected is that if I run just $ firebase deploy, it doesn't deploy the default test env defined in firebaserc, but the live test env?
.firebaserc:
{
"projects": {
"default": "test-app-tech",
"test": "test-app-tech",
"live": "live-app-tech"
}
}
firebase.json:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
},
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"storage": {
"rules": "storage.rules"
}
}
Full console log:
(not sure where a longer log file is than just the console)
=== Deploying to 'test-app-tech'...
i deploying storage, firestore, functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run build
> functions# build C:\Users\me\Documents\GitHub\react.app.tech\functions
> tsc
+ functions: Finished running predeploy script.
i firebase.storage: checking storage.rules for compilation errors...
+ firebase.storage: rules file storage.rules compiled successfully
i firestore: reading indexes from firestore.indexes.json...
i cloud.firestore: checking firestore.rules for compilation errors...
+ cloud.firestore: rules file firestore.rules compiled successfully
i functions: ensuring necessary APIs are enabled...
+ functions: all necessary APIs are enabled
i storage: latest version of storage.rules already up to date, skipping upload...
i firestore: uploading rules firestore.rules...
+ firestore: deployed indexes in firestore.indexes.json successfully
i functions: preparing functions directory for uploading...
i functions: packaged functions (80.39 KB) for uploading
+ functions: functions folder uploaded successfully
i hosting[test-app-tech]: beginning deploy...
i hosting[test-app-tech]: found 32 files in build
⠸ hosting: uploading new files [0/1] (0%)
Error: Task 5fcd5c559ded0c02b3ed7840ca3ee77e95b798730af98d9f18bc627ac898071e failed: retries exhausted after 6 attempts
Remove the content in .firebase folder and try to redeploy.
There are two reasons to happen this.
by deleting .firebase folder in your root folder will solve problem.
if this dosen't work,
your internet connection may slow and size of files in your project may be bigger. so try with fast internet connection.
with slow internet, if you try deploying again and again, you will see that number of files uploading decreases on console. that means your files are getting uploaded, but it taking too much time, and firebase is getting exhausted.
Explored a bit deeper by appending --debug suffix, which gave me: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined. Explored this, and tried to fix, but didn't work. I deleted /node_modules/, package-lock.json, and /build/, reinstalled packages, deployed and it worked. Not sure what fixed it because I deleted those files before to no avail. I did a few other small, seemingly unrelated changed, which who knows might have been connected, but its working now!
UPDATE: I had to truly find the error with this since my production environment was having the same issue, and narrowed it down to the steps I took exploring the TypeError [ERR_INVALID_ARG_TYPE]. Following this post somewhat, I changed:
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
to
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
then deployed and it went through, but nothing is shown on the live server, because it isn't looking at the build folder of course. So I changed it back to point to build instead of public, and deployed again and it worked. Weird solution, sending to Firebase team to see what really happened here.
In ANGULAR
What Douglas answered has been the solution, in angular.json you change the "hosting:" dist "" for "hosting:" public "".
Then you run the firebase deploy again and that will give you an error, but don't worry, go change what you modified in angular.json and then run firebase deploy again and voila! that worked for me
The problem for me was the connection dropping every few minutes. I was able to upload my files by repeating the upload process. It was not tenable to sit at the computer and repeat by hand, so in my root folder I added a bash script to retry on error in a loop.
Create file deploy_staging.sh or deploy_production.sh etc.:
#!/bin/bash
trap "exit" INT
firebase use my_project_name
until firebase deploy --only hosting:my_project; do
echo Transfer disrupted, retrying in 3 seconds...
sleep 3
done
(*the trap "exit" INT allows interruption of the loop by ctrl-c if needed)
In the directory of the file, on the terminal command line, run chmod +x my_file_name.sh to make the file executable.
Run the file with ./my_file_name.sh in the terminal. It will rerun firebase deploy:production until the files are uploaded.
enter image description here
Delete file firebase cache and firebase deploy again
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.
My ReactJs application runs fine on my local box, when I use the npm start command. However when I try to deploy my application using the firebase init to Firebase, I am seeing a blank page. What could I be doing wrong?
Update: I had to edit the Firebase.json file to remove the
"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],
line as I was getting errors related to that.
Firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"source": "functions"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"storage": {
"rules": "storage.rules"
}
}
Firebase deploy command output:
=== Deploying to 'socialmedia-5ec0a'...
i deploying database, storage, firestore, functions, hosting
i database: checking rules syntax...
+ database: rules syntax for database socialmedia-5ec0a is valid
i storage: checking storage.rules for compilation errors...
+ storage: rules file storage.rules compiled successfully
i firestore: checking firestore.rules for compilation errors...
+ firestore: rules file firestore.rules compiled successfully
i functions: ensuring necessary APIs are enabled...
+ functions: all necessary APIs are enabled
i storage: uploading rules storage.rules...
i firestore: uploading rules firestore.rules...
i functions: preparing functions directory for uploading...
i hosting[socialmedia-5ec0a]: beginning deploy...
i hosting[socialmedia-5ec0a]: found 5 files in public
+ hosting[socialmedia-5ec0a]: file upload complete
i database: releasing rules...
+ database: rules for database socialmedia-5ec0a released successfully
+ storage: released rules storage.rules to firebase.storage/socialmedia-5ec0a.appspot.com
+ firestore: released rules firestore.rules to cloud.firestore
i hosting[socialmedia-5ec0a]: finalizing version...
+ hosting[socialmedia-5ec0a]: version finalized
i hosting[socialmedia-5ec0a]: releasing new version...
+ hosting[socialmedia-5ec0a]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/socialmedia-5ec0a/overview
Hosting URL: https://socialmedia-5ec0a.firebaseapp.com
Chrome F12 output:
I was having the same problem. http://localhost:3000/ was serving the app well but when I deployed using npm run build and then firebase deploy I was just seeing a blank page.
I am not sure of the reason why, but I changed the 'public" property in the firebase.json to "build" and it worked.
here is my new firebase.json document.
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
After you have initialized your Firebase application with firebase init, you should have a firebase.json file in your project's folder. The thing is that the public key has to point to your build folder. For instance, in create-react-app the build folder is build/ after you have ran npm run build for the first time. Then the firebase.json has to look similar to this one:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The public key points to build. Then try another deploy with firebase deploy.
Have a look at the public property of you package.json
"public": "public",
It points to the resource folder where firebase hosting will look for your application. If the resource folder is empty, you will be presented with a blank page
When you build your react app, all the files go to the build folder by default, if you have not specified otherwise. So set the public property to your reactjs build folder.
Check you don't have the homepage property set inside package.json. I had it because I was also deploying to Github pages at first. Removed it, rebuilt, redeployed and worked.
Another thing you might also check if changing the firebase.json file does not work.
in the Chrome dev tools, go to Application->Clear Storage
click on clean site data
then refresh the app.
In some cases, it works.
delete .firebase folder
delete your build folder and build it again by "npm run build"
Then again initialize your app by "firebase init"
What do you want to use as your public directory? build // public directly should be build
Configure as a single-page app (rewrite all URLs to /index.html)? Yes // rewrite rules yes
Set up automatic builds and deploys with GitHub? (y/N) n // automatic builds no
File build/index.html already exists. Overwrite? (y/N) n // should not rewrite the index.html most important part
firebase deploy // you are good to go.
Just remove homepage key from the package.json file if you deployed it to GitHub also.
It worked for me hope so for you as well.
I found that firebase hosting requires some time to get all your website running. For me, it takes up to ~30 minutes for the first time it uploads. Subsequent updates should upload in an instant.
If you notice in the inspector developer tools, that only the html page is active and not the rest of the page, then this might be the solution.
So my advice is just to be patient and grab a cup of coffee :)
I had the the same problem. But after the build folder was pointed to. . . I was still seeing a blank host. In this case what you can do is copy the build folder which contains the firebase init code, and paste it into the public folder. Make sure that you add in your <div id=root> </div> into the body section, then npm run build again. Make sure also that your firebase.json is pointing to build as mentioned in earlier posts.
If changing the 'public' property in the firebase.json doesn't work then first find out in which folder is your index.html file, make sure it's the index.html that you wrote, cause firebase might put a mock index.html in the main folder and move your index.html in a 'build' folder, it might also have another folder with the name of your app inside the 'build' folder. Then you need to change the 'public' property in the firebase.json to the name of that folder, like this:
{
"hosting": {
"public": "my-app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
use build to build
{
"hosting": {
"build": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
100% Working Example.
Solved Blank Page Error in React App Hosting in Firebase .
Found solution in this blog
Host Your React Web App in few minutes.
Wrong sequence =>
firebase login
firbase init
firebase deploy
npm run build
Correct sequence =>
firebase login
firbase init
npm run build
firebase deploy