React website not showing after deployment with firebase

3
votes

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: enter image description here

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:

enter image description here

Update:

This is the screen now:

enter image description here

Update:

The new error:

enter image description here

7
reactjsfirebasereact-routerfirebase-hosting
You should have done yes to redirect to index.html create-react-app.dev/docs/deployment/#firebase - Alexander Staroselsky
@AlexanderStaroselsky still giving me blank page.. - adir
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. - abraham
@abraham 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? - adir
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. - abraham

7 Answers

5
votes

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.

3
votes

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
1
votes

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

1
votes
  • 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.
1
votes

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

0
votes

use

firebase login

firebase init

say Yes to overwrite

say build

then say no to deploy with github

npm run build

firebase deploy
-1
votes

After making the react js project, do this

  1. firebase init instead of Public folder, type "build" folder e.g.-
    ? What do you want to use as your public directory? build
    then yes, because ReactJs always give a single-page app. e.g.-

    ? Configure as a single-page app (rewrite all URLs to /index.html)? Yes

  2. type this command, after finishing firebase init commands. (not deploy now) npm run build

  3. Finally type firebase deploy