Configure internationalization (i18n) rewrites

Use internationalization rewrites ("i18n rewrites") to serve different content depending on a user's country or preferred language. Here are some example configurations that you could set up:

• Serve the same French content to all users who prefer French (regardless of country).Example: a homepage with French text

• Serve Standard French content to users who prefer French, but for Canadian users who prefer French, serve Canadian French content instead.Example: a homepage with Standard French phrasing versus a homepage with Canadian French phrasing

• Serve the same content to all Canadian users (regardless of their language preference).Example: a homepage with your site's "default" language but with a Canada-specific feature (like a holiday theme)

• Serve Canadian French content to Canadian users who prefer French.Example: a homepage with Canadian French phrasing and a Canada-specific feature (like a holiday theme)

Firebase Hosting determines a user's country from their IP address and a user's language preferences from the Accept-Language request header (usually set automatically by their web browser ).

Set up i18n rewrites

To set up i18n rewrites for your Hosting site, you need to create an "i18n content" directory for all your localized content, then add the i18n attribute to your firebase.json file to point to your new "i18n content" directory.

Here are the detailed steps:

1. Within your local app directory's public folder, make a separate directory for your "i18n content", then create subfolders for each language and country combination supported by your site.

   In each subfolder, add the content specific for that combination, like holiday-themed homepages or language-specific 404 pages.

   Here's an example "i18n content" directory called localized-files :

   public/
       index.html  // your site's default homepage
       404.html  // your site's custom 404 page
   
       localized-files/
           ALL_ca/
               index.html
           es_ALL/
               index.html
               404.html
           fr/
               index.html
               404.html
           fr_ca/
               index.html

   View the matching requests for each subfolder's content

     public 
    / 
     
    // 
     
    matches 
     
    requests 
     
    that 
     
    aren 
    't specified by your "i18n content" subfolders 
    // example: display your homepage in the "default" language for your site with no country-specific features 
     index.html// your site' 
    s 
     
    default 
     
    homepage 
     
     404. 
    html 
     
    // 
     
    your 
     
    site 
    's custom 404 page 
     localized-files/ 
    // matches requests from Canada with any language preference 
    // example: display your homepage in the "default" language for your site with a Canada-specific feature 
     ALL_ca/ 
    index.html 
    // matches requests from any country with a language preference of `es` or `es-foo` 
    // example: display your homepage in Spanish with no country-specific features 
     es_ALL/ 
    index.html 
    404.html  // your site' 
    s 
     
    custom 
     
    404 
     
    page 
     
    in 
     
    Spanish 
     
    // 
     
    matches 
     
    requests 
     
    from 
     
    any 
     
    country 
     
    with 
     
    a 
     
    language 
     
    preference 
     
    of 
     
    `fr` 
     
    or 
     
    `fr-foo` 
     
    // 
     
    example 
    : 
     
    display 
     
    your 
     
    homepage 
     
    in 
     
    Standard 
     
    French 
     
    with 
     
    no 
     
    country 
    - 
    specific 
     
    features 
     
     fr 
    / 
     
    index 
    . 
    html 
     
    404. 
    html 
     
    // 
     
    your 
     
    site 
    's custom 404 page in French 
    // matches requests from Canada with a language preference of `fr` or `fr-foo` 
    // example: display your homepage in Canadian French and/or with a Canada-specific feature 
     fr_ca/ 
    index.html