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

Need a 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

Need a 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

Need a 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

Need a hint?

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