Search code examples
reactjsfirebase-hosting

Pages missing on the server side only, in a Firebase/React app

I have a little web app using Firebase and React.

Locally it runs on

http://localhost:3000/

and has a couple of subpages like:

http://localhost:3000/login
http://localhost:3000/manage

All is OK so far. Then I upload my page to the server (as I have already done a few times now), running:

npm run build
firebase deploy

I can at this point access the app on the server, as expected using some link like:

https://myapp.web.app/

But I hit problems hereafter, trying these URLs (for some subpages) in the browser:

https://myapp.web.app/login
https://myapp.web.app/manage

I get this result, showing that some pages must be missing:

404
Page Not Found

The specified file was not found on this website. Please check  the URL for mistakes and try again.
Why am I seeing this?

This page was generated by the Firebase Command-Line Interface.     To modify it, edit the 404.html file in your project's  configured public directory.

I have checked my firebase.json file that this line is present in the "hosting" section:

"public": "build",

Knowing that, is there some possible issue that an experienced Firebase/React user would immediately think about and that I may be missing?

Solution

  • Your problem is probably because you init project and set it as it is not SPA.

    Set up your firebase.json file like this:

    {
"hosting": {
    "target": "This is when you need target",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

    Most important for SPA is "rewrites" section. When you open home page using browser request looks like this example.web.app/index.html even if you wrote example.web.app and when you request example.web.app/manage request looks like example.web.app/menage/index.html And in reallity you don't have this document so you need to setup hosting to rewrites all request to this one index.html document.