Fixed Blank page problem after successful Firebase deployment of React Project .
#React App Hosting in Firebase
I also faced this issue but after reading some posts i got the solution.
Tried so many times and it was showing blank page.
I thought it will not get solved by me but once we get the solution we feel like it was very easy.
Now it's your turn to feel the same.
In Every post regarding this issue the authors are not written one Note.
Which note ? that i will tell u once we reach at that step .
That must be specified by the authors to avoid the blank page problem.
So that's the reason i'm writing this post to help people like me .
Don't worry your app will be live in few minutes.
I'm assumming that you know how to create the Firebase Project .
Follow each and every step as it is .
1. Login To Firebase.
2. Create new project.
3. Go to Project Overview there is option add web app or u can see icon '</>' along with android ,unity icons etc . Add web app by selecting that '</>' icon .
1. click on "Register app".
we call it "Add Firebase SDK" to web app.
2. In this u will get CDN that we need to place in index.html after the <body> tag.
note: make sure the Firebase <script> should be the first <script> tag in index.html
3. then you will see "Continue to console" option click on it .
We're Done with Firebase.
Now we need to run commands from VS Code.
4. Open Your React Project in VS Code
5. Open Terminal in VSCode
6. Go to root folder of React Project.
7. Run below commands
Install the Firebase CLI using npm by running:
1.Log in to Firebase
If you are already logged in in browser then no need to run this command.
2.Firebase Init :
Once You run this command ,will get following questions .
Answer them as answered below.
Select default firebase project.
Note: Say "No" to all the re-write options .As it will not change our index.html file .
Now it's time to tell you the Note which must be specified .
What mistake we were doing is ,trying to run the command "firebase deploy" before running "npm run build" i.e Before having build ready .
Actual process is run "npm run build" command before the "firebase deploy" command.
Remember in react we need to bundle all the static files for production build like index.html ,js files,css styles, images etc in build folder by
running "npm run build" .
Earlier Firebase server was searching for the static files that were not there as we didn't run "npm run build" command before "firebase deploy" .
So This was actual problem with Firebase Hosting.
In React we need to build the app for production release by running "npm run build" .
It will create build folder which contains all the static file of the project.
3.Now Run:
We need to bundle all the static files of project in build folder .So Below is the command to create the build for production.
4.Now Deploy
Project Console: https://console.firebase.google.com/project/projectid/overview
Hosting URL: https://projectid.firebaseapp.com
I also faced this issue but after reading some posts i got the solution.
Tried so many times and it was showing blank page.
I thought it will not get solved by me but once we get the solution we feel like it was very easy.
Now it's your turn to feel the same.
In Every post regarding this issue the authors are not written one Note.
Which note ? that i will tell u once we reach at that step .
So that's the reason i'm writing this post to help people like me .
Don't worry your app will be live in few minutes.
I'm assumming that you know how to create the Firebase Project .
Follow each and every step as it is .
1. Login To Firebase.
2. Create new project.
3. Go to Project Overview there is option add web app or u can see icon '</>' along with android ,unity icons etc . Add web app by selecting that '</>' icon .
1. click on "Register app".
we call it "Add Firebase SDK" to web app.
2. In this u will get CDN that we need to place in index.html after the <body> tag.
note: make sure the Firebase <script> should be the first <script> tag in index.html
3. then you will see "Continue to console" option click on it .
We're Done with Firebase.
Now we need to run commands from VS Code.
4. Open Your React Project in VS Code
5. Open Terminal in VSCode
6. Go to root folder of React Project.
7. Run below commands
Install the Firebase CLI using npm by running:
npm install -g firebase-tools
1.Log in to Firebase
firebase login
If you are already logged in in browser then no need to run this command.
2.Firebase Init :
Once You run this command ,will get following questions .
Answer them as answered below.
firebase init
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
Select default firebase project.
? Select a default Firebase project for this directory: => projectid_firbase
? Configure as a single-page app (rewrite all urls to /index.html)? No
Note: Say "No" to all the re-write options .As it will not change our index.html file .
Now it's time to tell you the Note which must be specified .
What mistake we were doing is ,trying to run the command "firebase deploy" before running "npm run build" i.e Before having build ready .
Actual process is run "npm run build" command before the "firebase deploy" command.
Remember in react we need to bundle all the static files for production build like index.html ,js files,css styles, images etc in build folder by
running "npm run build" .
Earlier Firebase server was searching for the static files that were not there as we didn't run "npm run build" command before "firebase deploy" .
So This was actual problem with Firebase Hosting.
In React we need to build the app for production release by running "npm run build" .
It will create build folder which contains all the static file of the project.
3.Now Run:
We need to bundle all the static files of project in build folder .So Below is the command to create the build for production.
npm run build
4.Now Deploy
firebase deploy
Project Console: https://console.firebase.google.com/project/projectid/overview
Hosting URL: https://projectid.firebaseapp.com
Comments
Post a Comment