Blank page after successful Firebase deployment
Solution 1
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"
}
]
}
}
Solution 2
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
.
Solution 3
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.
Solution 4
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.
Solution 5
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.
Related videos on Youtube
Ajit Goel
Technical Lead with more than 14 years in designing and developing software applications Strong experience with key enterprise application design approaches including service-oriented architectures, transactions, concurrency, object-relational data access, and scalability on the Microsoft .NET platform with expertise in building enterprise applications against SQL databases Expert in reusable software components and frameworks Hands on experience in Object Oriented Analysis and Design Strong database performance tuning experience. Worked with various teams as onsite coordinator and handled responsibilities such as setting up environments, knowledge transfer, code review and compliance to best practices & standards. Fully conversant with SDLC\Agile methodologies, estimation, architecture, application development, database design and testing
Updated on December 05, 2021Comments
-
Ajit Goel over 2 years
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 thefirebase 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
-
nambk over 3 yearsDid you run
npm run build
? -
nambk over 3 yearsI had the same issue, but solved by changing
"hosting"
to"public": "build"
, runnpm run build
again, and thenfirebase deploy
-
-
Ajit Goel over 5 yearsI used the npm run-script build command to generate the build files.
-
DarkLeafyGreen over 5 yearsWhat is the point of posting the exact same answer as me, 8h after I posted mine??
-
Nogg almost 5 yearsThis was the solution for me. While watching the dev tools it kept trying to pull static files from a url based on the homepage property. Deleted the property and everything worked.
-
Admin almost 5 yearsThis was the solution for me too. So I choose firebase over Github.
-
doublejosh about 4 yearsThis setting would point the public folder to your build folder... which in this case is where the built files are :)
-
doublejosh about 4 yearsYou also need to ensure you at least have these items in your package.json scripts...
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "predeploy": "npm run build", "deploy": "firebase build" }
-
Loren about 4 yearsIn my case i needed to have "public":"build" and need to add the "rewrites" array to my firebase.json document.
-
Donald Duck over 3 yearsWhile this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
-
Moni almost 3 yearsThanks for this answer. When you run "firebase init", it asks "? What do you want to use as your public directory?". If you answer "build" here, instead of accepting the default value of "public", it will result in the same behavior. (One would have to execute "npm run build" before this, to ensure it works)