Multiple site hosting in Firebase - Commands & Configuration

Introduction

Sometimes you want to host more than one website using the same Firebase project. Multiple site hosting lets you serve different websites from one place without needing separate projects.

When you have a main website and a blog that you want to host separately but manage together.

When you want to host a marketing site and a user dashboard under the same Firebase project.

When you want to test a new version of your site on a separate URL before switching.

When you want to host different language versions of your site on different URLs.

When you want to save costs by using one Firebase project for multiple small sites.

Config File - firebase.json

firebase.json

{
  "hosting": [
    {
      "target": "main-site",
      "public": "public-main",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        { "source": "/api/**", "function": "api" }
      ]
    },
    {
      "target": "blog-site",
      "public": "public-blog",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
    }
  ]
}

This file tells Firebase to host two separate sites: main-site and blog-site. Each site has its own folder with files to serve (public-main and public-blog).

The ignore list skips unnecessary files. The rewrites section sends API requests to a cloud function named api for the main site.

Commands

This command links the hosting target name 'main-site' to the Firebase hosting site named 'main-site'. It prepares Firebase to deploy files to this site.

Terminal

firebase target:apply hosting main-site main-site

Expected Output

✔  Target hosting:main-site has been applied to site main-site in project your-project-id

This links the hosting target 'blog-site' to the Firebase hosting site named 'blog-site'. It sets up the second site for deployment.

Terminal

firebase target:apply hosting blog-site blog-site

Expected Output

✔  Target hosting:blog-site has been applied to site blog-site in project your-project-id

Deploys the files from the 'public-main' folder to the 'main-site' hosting target. This publishes the main website.

Terminal

firebase deploy --only hosting:main-site

Expected Output

=== Deploying to 'your-project-id'...



i  deploying hosting



✔  hosting[main-site]: file upload complete

✔  hosting[main-site]: finalizing version...

✔  hosting[main-site]: version is live



✔  Deploy complete!

→

--only hosting:main-site - Deploy only the main-site hosting target

Deploys the files from the 'public-blog' folder to the 'blog-site' hosting target. This publishes the blog website separately.

Terminal

firebase deploy --only hosting:blog-site

Expected Output

=== Deploying to 'your-project-id'...



i  deploying hosting



✔  hosting[blog-site]: file upload complete

✔  hosting[blog-site]: finalizing version...

✔  hosting[blog-site]: version is live



✔  Deploy complete!

→

--only hosting:blog-site - Deploy only the blog-site hosting target

Lists all hosting sites in the Firebase project to verify both sites exist and are ready.

Terminal

firebase hosting:sites:list

Expected Output

Site ID       Default URL

main-site     https://main-site-your-project-id.web.app

blog-site     https://blog-site-your-project-id.web.app

Key Concept

If you remember nothing else from this pattern, remember: Firebase lets you host multiple websites in one project by defining separate hosting targets and deploying each site’s files to its target.

Common Mistakes

Not applying hosting targets before deploying multiple sites

Firebase won't know which site to deploy to, causing deployment errors or overwriting the wrong site.

Always run 'firebase target:apply hosting <target-name> <site-name>' for each site before deploying.

Using the same public folder for multiple hosting targets

Both sites will serve the same files, defeating the purpose of multiple site hosting.

Use separate folders for each site’s files and specify them in firebase.json.

Deploying without specifying the hosting target

Firebase deploys all hosting targets by default, which can be slow or cause unintended changes.

Use '--only hosting:<target-name>' to deploy one site at a time.

Summary

Define multiple hosting targets in firebase.json with separate public folders.

Apply each hosting target to a Firebase site using 'firebase target:apply hosting'.

Deploy each site separately using 'firebase deploy --only hosting:<target-name>'.

Verify sites with 'firebase hosting:sites:list' to see URLs and status.