Multiple site hosting in Firebase - Mini Project: Build & Apply

Multiple Site Hosting with Firebase

📖 Scenario: You are managing a small business website that needs to host two separate sites: a main company site and a blog. You want to use Firebase Hosting to serve both sites from the same Firebase project but on different URLs.

🎯 Goal: Set up Firebase Hosting to deploy two different sites under one Firebase project using multiple site hosting configuration.

📋 What You'll Learn

Create a Firebase configuration file with two hosting sites

Add site-specific public directories for each site

Configure hosting targets for the main site and the blog site

Deploy both sites using Firebase CLI

💡 Why This Matters

🌍 Real World

Many businesses and developers want to host multiple websites or apps under one Firebase project to save costs and simplify management.

💼 Career

Understanding multiple site hosting is useful for cloud engineers and web developers managing scalable web infrastructure.

1

Create Firebase Hosting configuration with two sites

Create a firebase.json file with a hosting array containing two site configurations. The first site should have target set to main-site and public directory set to public-main. The second site should have target set to blog-site and public directory set to public-blog.

Firebase

# Create firebase.json with two hosting sites
# Your code here

Hint

Use an array under hosting with two objects, each having target and public keys.

2

Add site-specific public directories

Create two folders named public-main and public-blog in your project directory. Add an index.html file inside each folder with simple HTML content: <h1>Main Site</h1> in public-main/index.html and <h1>Blog Site</h1> in public-blog/index.html.

Firebase

{
  "hosting": [
    {
      "target": "main-site",
      "public": "public-main"
    },
    {
      "target": "blog-site",
      "public": "public-blog"
    }
  ]
}
# Create folders public-main and public-blog with index.html files
# Your code here

Hint

Make sure each folder has an index.html file with the correct heading.

3

Configure hosting targets in Firebase CLI

In your Firebase project, run firebase target:apply hosting main-site main-site and firebase target:apply hosting blog-site blog-site to set hosting targets for the main site and blog site respectively.

Firebase

{
  "hosting": [
    {
      "target": "main-site",
      "public": "public-main"
    },
    {
      "target": "blog-site",
      "public": "public-blog"
    }
  ]
}

# Run these commands in terminal:
# firebase target:apply hosting main-site main-site
# firebase target:apply hosting blog-site blog-site
# Your code here

Hint

Use the exact commands to assign hosting targets for each site.

4

Deploy both sites using Firebase CLI

Deploy both sites by running firebase deploy --only hosting:main-site,hosting:blog-site in your terminal to publish the main site and blog site to Firebase Hosting.

Firebase

{
  "hosting": [
    {
      "target": "main-site",
      "public": "public-main"
    },
    {
      "target": "blog-site",
      "public": "public-blog"
    }
  ]
}

# Deploy both sites with one command
# Your code here

Hint

Use the firebase deploy command with the --only hosting:main-site,hosting:blog-site option.

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