Getting 404-Page Not Found error, when i reload my react application which is on firebase

Question

I have deployed my react application on firebase, when i reload the page it is showing the below page.

Firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

NOT A SINGLE PAGE APP

Answer 1

Add the following rewrites rules:

"hosting": {
    "public": "build",
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ],
    "rewrites": [
        {
            "source": "**",
            "destination": "/index.html"
        }
    ]
}

This will ensure that Firebase will serve up your React app for any route requested.

Answer 2

Add a 'rewrite' rule in your firebase.json file. Your firebase.json file should look like this:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}