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:

Mapel

You should have done yes to redirect to index.html create-react-app.dev/docs/deployment/#firebase – Aulea

@AlexanderStaroselsky still giving me blank page.. – Mapel

If it's an blank page check your browser's dev tools. It's probably rendering the HTML but running into issues with the JavaScript. – Empery

@Empery it's not shows me the dev tools don't know why, but there is an error in the console.. i edit the post and added a screen shot. Do you think this is the cause of the problem? – Mapel

That error means those JavaScript filled did not get deployed or are not where the HTML is trying to load them from. Maybe try building and deploying again. – Empery

@Empery Done, now it shows me firebase massage (added the screenshot to the post) What should i do to fix it? – Mapel

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.

Persuader

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:

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

Bissonnette

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

Mapel

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.

Aubergine

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

Poetry

Answer 6

1. Run:

% firebase login
% firebase init

3. Select 'hosting - with firebase'

4. Choose Yes to overwrite

5. Choose Build

6. Choose no to Deploy with Github

7. Run:

% npm run build
% firebase deploy

Lur

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

Rigging

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Dolmen

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

1. By running command (npm run build) just before (firebase deploy command)
2. Setting public directory option to public or build instead of using dist
3. Setting (Configure as a single-page app (rewrite all urls to /index.html)? No)
4. Setting (File dist/index.html already exists. Overwrite? Yes)

The steps that I followed to solve this issue are:

Pre-requisite:

1. delete .firebase folder
2. 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

Chacon

Answer 9

run npm run build before Firebase hosting it will create a dist folder in your directory. Now use the dist folder instead of public.

Bonnie

Answer 10

Press f5 after opening the hosted page.

Badger