Search code examples
firebaselocalizationfirebase-hosting

Implementing localized 404 page with Firebase hosting

Say my web app has two locales: English(myapp.com/en/) and French(myapp.com/fr/). I want to localize my 404 pages, so that request to myapp.com/en/non-existent or myapp.com/non-existent would return an English version of the 404 page and request to myapp.comm/fr/non-existent would return a French one.

However, it seems like Firebase Hosting does not provide such functionality by default, as it only allows a single 404 page(source)

So, is there a way of implementing a localized 404 page with Firebase Hosting?

Solution

  • As of August 12th 2020, Firebase Hosting now includes support for i18n internalization.

    Here's how to use it:

    1. Create a new directory to host these localized files (e.g localized) under your public directory.
    2. Update your firebase.json file to include a reference to this new directory:
    // firebase.json

"hosting": {

  "public": "public",

  "ignore": [
     // ...
  ],

  "i18n": {
    "root": "/localized"  // directory that contains your "i18n content"
  }

  // ...
}
    1. Under the localized directory, create a new directory named fr, and that's where you can add your french 404.html file.
    2. Run firebase deploy to deploy your site and now your french users should be redirected to the correct page :)

    See the Firebase Docs for more information on country and language codes.