Firebase Hosting Multiple Sites

March 12, 2020

Create multiple sites

Goto Firebase Console -> Hosting, then Advance -> Add another site.

Select a site name, also known as resource name.

Testing

Edit firebase.json.

Change hosting to array of objects.
Each hosting object should have a target field (known as target name).
Assign a different public directory for each hosting object

{
  "hosting": [
    {
      "target": "main",
      "public": "main/public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**",
        "**/public-*/**"
      ],
      "trailingSlash": false
    },
    {
      "target": "app",
      "public": "app/public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**",
        "**/app/public-*/**"
      ],
      "rewrites": [
        {
          "source": "/test",
          "function": "test"
        },
        {
          "source": "**",
          "function": "nuxtssr"
        }
      ],
      "headers": [
        {
          "source": "**/_nuxt/*.*",
          "headers": [{
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }]
        }
      ],
      "trailingSlash": false
    }
  ],
}

Usage

firebase serve --only hosting:TARGET_NAME

firebase serve --only functions,hosting:TARGET_NAME

Deployment

Assign target name to resource name.

firebase target:apply hosting TARGET_NAME RESOURCE_NAME

The command above will update .firebaserc

{
  "projects": {
    "default": "PROJECT_ID"
  },
  "targets": {
    "PROJECT_ID": {
      "hosting": {
        "TARGET_NAME": [
          "RESOURCE_NAME"
        ],
        "TARGET_NAME02": [
          "RESOURCE_NAME02s"
        ]
      }
    }
  }
}

Deploy

firebase deploy --only hosting:TARGET_NAME

NOTE: Cloud functions are shared between multiple sites (actually, functions are independent from hosting). Each hosting site can has its own rewrites via firebase.json.

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Setup Firebase Hosting

Firebase Hosting Trailing Slash