Firebase Hosting, create a 404 page

10
votes

I'm using Firebase to host a domain with some static html, javascript and images. It works great. The last thing I want to do, is creating a custom 404-error page. According to the Firebase Hosting Documentation (link) I only have to put a file called '404.html' inside the project public directory. It doesn't work. A tree view of my project directory:

  • 404.html
  • index.html
  • images (directory)
  • robots.txt

My firebase.json file looks like this:

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

What am I doing wrong? Thanks.

1
firebasefirebase-hosting

1 Answers

20
votes

Your source is: 

"source": "**"

This causes all routes to go to the index.html file. Since all routes go there, it will never throw a 404. If you want the 404 to work, you must specify the routes that actually work. ie:

"source": "/"