Multiple site hosting in Firebase - Step-by-Step Execution

Process Flow - Multiple site hosting

Start: Prepare sites

↓

Create firebase.json config

↓

Add hosting targets for each site

↓

Run firebase deploy

↓

Firebase uploads each site

↓

Sites available at different URLs

↓

Users access sites separately

This flow shows how you prepare multiple sites, configure them in Firebase, deploy, and then access each site at its own URL.

Execution Sample

Firebase

firebase init hosting
firebase.json with multiple targets
firebase deploy --only hosting:site1,hosting:site2

This sequence initializes hosting, configures multiple sites, and deploys them to Firebase.

Process Table

Step	Action	Input/Config	Result	Notes
1	Initialize Firebase Hosting	firebase init hosting	Hosting setup files created	Prepares project for hosting
2	Edit firebase.json	{ "hosting": [{"target": "site1", "public": "site1"}, {"target": "site2", "public": "site2"}] }	Multiple hosting targets defined	Configures multiple sites
3	Deploy sites	firebase deploy --only hosting:site1,hosting:site2	Site1 and Site2 uploaded	Deploys both sites in one command
4	Access sites	site1 URL and site2 URL	Each site loads separately	Users see different content per site
5	Exit	All sites deployed	Deployment complete	No errors, hosting active

💡 All sites deployed and accessible at their respective URLs

Status Tracker

Variable	Start	After Step 2	After Step 3	Final
firebase.json	empty or default	configured with multiple hosting targets	unchanged	configured with multiple hosting targets
hosting targets	none	site1 and site2 defined	site1 and site2 deployed	site1 and site2 deployed
deployment status	not deployed	not deployed	deployed	deployed

Key Moments - 3 Insights

Why do we need to specify multiple hosting targets in firebase.json?

Because each site needs its own configuration to tell Firebase where its files are and how to serve it. See execution_table step 2.

Can we deploy multiple sites with one command?

Yes, using 'firebase deploy --only hosting:site1,hosting:site2' deploys all specified sites at once. See execution_table step 3.

How do users access different sites after deployment?

Each site has its own URL or subdomain configured by Firebase, so users visit different addresses to see each site. See execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result after editing firebase.json in step 2?

A Sites deployed

B Multiple hosting targets defined

C Hosting setup files created

D Users access sites

💡 Hint

Check the 'Result' column in step 2 of execution_table

At which step are the sites actually uploaded to Firebase?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for 'uploaded' or 'deployed' in the 'Result' column

If we only deploy hosting:site1, what happens to site2?

A Site2 remains unchanged and not updated

B Site2 is also deployed automatically

C Site2 is deleted

D Deployment fails

💡 Hint

Refer to deployment command in execution_sample and step 3 in execution_table

Concept Snapshot

Multiple site hosting in Firebase:
- Define multiple hosting targets in firebase.json
- Each target points to a different folder
- Deploy multiple sites with one command
- Each site gets its own URL
- Users access sites separately

Full Transcript

Multiple site hosting in Firebase involves preparing each site folder, configuring firebase.json with multiple hosting targets, and deploying them together. The process starts by initializing hosting, then editing firebase.json to add each site as a target with its own public folder. Deployment uploads all specified sites, making them available at separate URLs. Users can then access each site independently. This method allows managing multiple websites under one Firebase project efficiently.

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