React website not showing after deployment with firebase - reactjs

Question

Trying to deploy for the first time to firebase , I looked in alot of guides on youtube and stackoverflow did the same as they did but keep getting blank page after deploy the app.
This is my process:
-yarn build
-firebase login
-firebase init
That's how i filled the init:
Hosting: Configure and deploy Firebase Hosting sites
2.What do you want to use as your public directory? build
3.Configure as a single-page app (rewrite all urls to /index.html)? No
4.File build/404.html already exists. Overwrite? No
5.File build/index.html already exists. Overwrite? (y/N) No
I tried few ways sometimes i change some of them to Yes still the same result
-firebase deploy
That how my files looks like:
This is the code of my Router:
const App = () => {
return (
<div>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/brands" exact component={Brands} />
<Route path="/guide" exact component={Guide} />
<Route path="/contact" exact component={Contact} />
<Route
render={function() {
return <p>Not found</p>;
}}
/>
</Switch>
</div>
);
};
The error i have:
Update:
This is the screen now:
Update:
The new error:

Answer 1

Go to your firebase.json file and make sure that the 'public' key under "hosting" is set to "build" like below:
"hosting": {
"public": "build"
}
It was likely set to "public" by default when you ran firebase init. In which case it would look like this:
"hosting": {
"public": "public"
}
The problem with the default is that React places all your static assets in the 'build' directory when you run npm run build, so that is where you want to point firebase to.
I had the same issue and this worked for me.

Answer 2

It's possible the index.html file in build got overwritten during the firebase init process. When that happens, firebase overwrites the files with its default template structures and hence the reason for that template. If the index.html file in the public folder still has your required template, delete the build folder, alongside the files and folders generated by firebase(not really a requirement, but just to keep stuff cleaner and fresher) i.e .firebase folder, .firebaserc and firebase.json file, and then:
run npm run build or yarn build, depending on your package manager
run firebase login and fill necessary requirements (skip if already logged in)
run firebase init
select the Hosting option (navigate using arrow keys, select using spacebar. Enter after selection)
select an existing firebase app or create a new one
type build for the folder choice
type/select yes for single page app option
type/select no to avoid overwriting of files by firebase
run firebase serve --only hosting for testing
run firebase deploy

Answer 3

I tried to deploy to github before doing it with firebase , So an "homepage:" field was left in the package.json. all i needed to do was to delete this field and rebuild and redeploy and everything is working

Answer 4

First you npm build or yarn build depending on what you use.
Then firebase login.
Then firebase init - choose hosting, then choose build instead of the public that is generated automatically for you.
Then you choose yes and then no.
And then you deploy.

Answer 5

you'll need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next. See this:
https://create-react-app.dev/docs/deployment/#firebase

Answer 6

Run:
% firebase login
% firebase init
Select 'hosting - with firebase'
Choose Yes to overwrite
Choose Build
Choose no to Deploy with Github
Run:
% npm run build
% firebase deploy

Answer 7

Same error I got then my problem solved with following step
run npm run build or yarn build, depending on your package manager
run firebase login and fill necessary requirements (skip if already logged in)
run firebase init
select the Hosting option (navigate using arrow keys, select using spacebar. Enter after selection)
select an existing firebase app or create a new one
type build for the folder choice
type/select yes for single page app option
type/select no to avoid overwriting of files by firebase
run firebase serve --only hosting for testing
run firebase deploy

Answer 8

I don't know the exact reason of the issue (Page was blank and was giving 404 Error) but somehow, I solved it. The reason of this issue could be (according to my assumptions):
By running command (npm run build) just before (firebase deploy
command)
Setting public directory option to public or build instead of using
dist
Setting (Configure as a single-page app (rewrite all urls to
/index.html)? No)
Setting (File dist/index.html already exists. Overwrite? Yes)
The steps that I followed to solve this issue are:
Pre-requisite:
delete .firebase folder
copy your project's index.html file content/code and replace it with
the build folder's index.html file content because these two files
should have same content/code
Step 0): npm run build (For React App)
Step 1): npm install -g firebase-tools
Step 2): firebase login (If you are already login, then there is no need for this step)
Step 3): firebase init
Step 4): Are you ready to proceed? Yes
Step 5): What do you want to use as your public directory? dist
Step 6): Configure as a single-page app (rewrite all urls to /index.html)? Yes
Step 7): Set up automatic builds and deploys with GitHub? No
Step 8): File dist/index.html already exists. Overwrite? No
Step 9): firebase deploy