React website not showing after deployment with firebase

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:

1. 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:

Solution 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.

Solution 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:

1. run npm run build or yarn build, depending on your package manager
2. run firebase login and fill necessary requirements (skip if already logged in)
3. run firebase init
4. select the Hosting option (navigate using arrow keys, select using spacebar. Enter after selection)
5. select an existing firebase app or create a new one
6. type build for the folder choice
7. type/select yes for single page app option
8. type/select no to avoid overwriting of files by firebase
9. run firebase serve --only hosting for testing
10. run firebase deploy

Solution 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

Solution 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.