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.

Practice

1. What is the main benefit of using multiple site hosting in Firebase?

easy

A. Manage several websites under one Firebase project

B. Increase database storage automatically

C. Enable offline data synchronization

D. Create unlimited Firebase projects

Solution

1. Step 1: Understand multiple site hosting purpose

   Multiple site hosting allows managing multiple websites within a single Firebase project.

2. Step 2: Compare options

   Options B, C, and D relate to other Firebase features, not multiple site hosting.

3. Final Answer:

   Manage several websites under one Firebase project -> Option A

4. Quick Check:

   Multiple site hosting = Manage multiple sites [OK]

Hint: Multiple site hosting means many sites in one project [OK]

Common Mistakes:

• Confusing hosting with database features
• Thinking it creates new Firebase projects
• Assuming it automatically increases storage

2. Which file must you edit to define multiple hosting sites in a Firebase project?

easy

A. package.json

B. index.html

C. .firebaserc

D. firebase.json

Solution

1. Step 1: Identify configuration file for hosting

   The firebase.json file holds hosting configurations including multiple sites.

2. Step 2: Eliminate other files

   index.html is a webpage, package.json is for Node.js dependencies, and .firebaserc stores project aliases but not hosting sites.

3. Final Answer:

   firebase.json -> Option D

4. Quick Check:

   Hosting sites defined in firebase.json [OK]

Hint: Hosting config is always in firebase.json [OK]

Common Mistakes:

• Editing .firebaserc instead of firebase.json
• Confusing package.json with Firebase config
• Trying to define sites in index.html

3. Given this snippet in firebase.json:

{
  "hosting": [
    {
      "target": "siteA",
      "public": "publicA"
    },
    {
      "target": "siteB",
      "public": "publicB"
    }
  ]
}

What command links the target siteA to a Firebase Hosting site ID?

medium

A. firebase target:apply hosting siteA your-site-id

B. firebase deploy --only hosting:siteA

C. firebase init hosting siteA

D. firebase hosting:link siteA your-site-id

Solution

1. Step 1: Understand target linking command

   The command firebase target:apply hosting <target> <site-id> links a target name to a Firebase Hosting site ID.

2. Step 2: Review options

   firebase deploy --only hosting:siteA deploys hosting but does not link targets. firebase init hosting siteA initializes hosting but does not link targets. firebase hosting:link siteA your-site-id is not a valid Firebase CLI command.

3. Final Answer:

   firebase target:apply hosting siteA your-site-id -> Option A

4. Quick Check:

   Target apply links target to site ID [OK]

Hint: Use 'firebase target:apply hosting' to link targets [OK]

Common Mistakes:

• Using deploy instead of target:apply to link
• Trying to link with firebase init
• Assuming 'hosting:link' is a valid command

4. You added two sites in firebase.json hosting array but forgot to run firebase target:apply hosting. What happens when you deploy?

medium

A. Firebase creates new site IDs automatically

B. Both sites deploy successfully with default site IDs

C. Deployment fails with an error about missing target link

D. Only the first site deploys, second is ignored silently

Solution

1. Step 1: Understand target linking requirement

   Each hosting target must be linked to a Firebase Hosting site ID using firebase target:apply hosting.

2. Step 2: Consequence of missing link

   If targets are not linked, deployment fails with an error indicating missing target link.

3. Final Answer:

   Deployment fails with an error about missing target link -> Option C

4. Quick Check:

   Missing target link causes deployment error [OK]

Hint: Always link targets before deploying multiple sites [OK]

Common Mistakes:

• Assuming Firebase auto-links targets
• Expecting silent ignore of unlinked sites
• Thinking deployment creates new site IDs

5. You want to host two websites: a blog and a store, under one Firebase project. You defined them in firebase.json hosting array with targets blog and store. Which sequence correctly sets up and deploys both sites?

hard

A. Run firebase deploy --only hosting:blog,hosting:store directly without linking targets

B. Run firebase target:apply hosting blog blog-site-id and firebase target:apply hosting store store-site-id, then firebase deploy --only hosting

C. Add sites in .firebaserc and run firebase deploy

D. Run firebase init hosting blog and firebase init hosting store then deploy

Solution

1. Step 1: Link each target to its Firebase Hosting site ID

   Use firebase target:apply hosting <target> <site-id> for both blog and store targets.

2. Step 2: Deploy all hosting targets

   Run firebase deploy --only hosting to deploy all defined hosting sites.

3. Final Answer:

   Run target:apply for blog and store, then deploy hosting -> Option B

4. Quick Check:

   Link targets first, then deploy hosting [OK]

Hint: Link targets first, then deploy all hosting sites [OK]

Common Mistakes:

• Deploying without linking targets
• Trying to define sites only in .firebaserc
• Using firebase init hosting multiple times incorrectly