Have you been experiencing a blank page after successfully deploying your React project to Firebase? This article will walk you through how I was able to resolve mine - despite that my local host was serving the app well.
How It Started
As part of my ongoing participation in the DevCareer Tech Program, one of the modules in the course involved deploying a simple React Project using Firebase. In the past, I have been able to deploy most of my projects using either Vercel or Netlify successfully, using Firebase has a lot of advantages such as Authentication, and other awesome integration tools from Google Firebase.
After following all the necessary steps in deploying my project to Firebase, my project was showing blank on the Firebase web app URL despite that the localhost URL was serving the app well.
Below is an image of how the project was showing via my localhost URL
The image below shows an empty blank page on the Firebase deployment URL😐
Steps Taken to Fix React App Blank Screen on Firebase
I made several attempts to resolve the issue which included modifying my codebase from the initial complex project to a simple project. I also ensured all unused values and/or variables were either completely removed from the project or commented out.
In addition to the above, I ran both npm start for my localhost view and npm run build for the optimized build to see any error messages and fix them one after the other.
Despite all of the above, I was still getting a blank page whenever my React App was deployed to Firebase.
Until I found one simple fix that resolved everything.
How I was able to Fix the Blank page after a successful ReactJS Firebase deployment
The simple fix was to change a value from the firebase.json file from public to build. The below image shows the value I changed (with an arrow pointed)
Below is the result of my project on the Firebase LIVE Link
In case you encountered a similar problem, I hope this guide helps you in fixing it.
Happy coding