React website not showing after deployment with firebase

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:

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:

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.