Multiple site hosting in Firebase - Deep Dive

Overview - Multiple site hosting

What is it?

Multiple site hosting means putting more than one website on the same cloud project or server. With Firebase, you can host several websites under one account, each with its own web address and content. This helps manage different sites easily without needing separate projects for each. It is like having multiple stores in one shopping mall, each with its own entrance and products.

Why it matters

Without multiple site hosting, you would need a separate cloud project or account for every website. This would make managing many sites harder, costlier, and more confusing. Multiple site hosting saves time, money, and effort by letting you organize and deploy many sites together. It also helps businesses or developers keep related sites under one roof, making updates and control simpler.

Where it fits

Before learning multiple site hosting, you should understand basic Firebase hosting and how to deploy a single website. After this, you can explore advanced Firebase features like custom domains, SSL certificates, and continuous deployment. This topic fits in the journey of managing scalable web projects and cloud infrastructure efficiently.

Mental Model

Core Idea

Multiple site hosting lets you run several independent websites from one Firebase project, each with its own settings and content.

Think of it like...

It's like owning a shopping mall where each store has its own entrance and products, but all share the same building and management.

┌─────────────────────────────┐
│       Firebase Project       │
│ ┌───────────────┐           │
│ │ Site A        │           │
│ │ (siteA.com)   │           │
│ └───────────────┘           │
│ ┌───────────────┐           │
│ │ Site B        │           │
│ │ (siteB.com)   │           │
│ └───────────────┘           │
│ ┌───────────────┐           │
│ │ Site C        │           │
│ │ (siteC.com)   │           │
│ └───────────────┘           │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Firebase Hosting Basics

Concept: Learn what Firebase Hosting is and how it serves a single website.

Firebase Hosting is a service that lets you put your website files on the internet easily. You upload your site files, and Firebase gives you a web address to visit your site. It handles fast delivery and security automatically.

Result

You can deploy and visit a simple website hosted on Firebase with a unique URL.

Knowing how Firebase Hosting works for one site is essential before managing multiple sites.

2

Foundation

Setting Up a Firebase Project

Concept: Create a Firebase project to hold your hosting sites and other services.

A Firebase project is like a container for your apps and sites. You create it once in the Firebase console, then add hosting or other features. It gives you a place to manage your sites together.

Result

You have a Firebase project ready to host websites and use other Firebase tools.

Understanding the project structure helps organize multiple sites under one roof.

3

Intermediate

Configuring Multiple Sites in One Project

🤔Before reading on: do you think you need separate Firebase projects for each website or can one project hold many? Commit to your answer.

Concept: Firebase allows multiple hosting sites inside a single project by defining them in configuration files.

In your Firebase project, you can add multiple sites by editing the firebase.json file. Each site has its own folder with files and its own hosting configuration. You register each site with a unique name in the project.

Result

You can deploy different websites from one project, each accessible by its own URL or domain.

Knowing that one project can hold many sites simplifies management and reduces overhead.

4

Intermediate

Deploying Multiple Sites Separately

🤔Before reading on: do you think deploying multiple sites happens all at once or can you deploy them individually? Commit to your answer.

Concept: You can deploy each site independently or all at once using Firebase CLI commands.

Using the Firebase CLI, you specify which site to deploy by name. For example, 'firebase deploy --only hosting:siteA' deploys only Site A. This lets you update one site without affecting others.

Result

You have control over which site to update, making deployment safer and more flexible.

Understanding selective deployment prevents accidental overwrites and downtime.

5

Intermediate

Using Custom Domains for Each Site

Concept: Assign your own web addresses to each hosted site for branding and professionalism.

Firebase lets you connect custom domains like 'www.mysite.com' to each hosting site. You verify domain ownership and configure DNS records. Each site can have its own domain or subdomain.

Result

Visitors see your branded web addresses instead of Firebase default URLs.

Custom domains make sites look professional and trustworthy to users.

6

Advanced

Managing SSL and Security Across Sites

🤔Before reading on: do you think SSL certificates must be managed manually for each site or does Firebase automate this? Commit to your answer.

Concept: Firebase automatically provisions SSL certificates for all hosted sites and custom domains.

When you add a custom domain, Firebase requests and renews SSL certificates for you. This means all sites are served securely with HTTPS without extra work.

Result

All your sites have encrypted connections, protecting visitors and improving SEO.

Knowing SSL is automatic reduces security worries and setup complexity.

7

Expert

Optimizing Multiple Site Hosting for Large Projects

🤔Before reading on: do you think hosting many sites in one project affects performance or billing? Commit to your answer.

Concept: Large projects with many sites require careful organization, billing awareness, and deployment strategies.

Firebase charges hosting based on bandwidth and storage per project, so many sites share costs. Organize sites with clear folder structures and use CI/CD pipelines to automate deployments. Monitor usage to avoid surprises.

Result

You run many sites efficiently, control costs, and maintain high quality.

Understanding billing and deployment automation is key for professional multi-site management.

Under the Hood

Firebase Hosting uses a global content delivery network (CDN) to serve your site files quickly worldwide. When you deploy multiple sites, Firebase stores each site's files separately but under the same project backend. The firebase.json file maps URLs and domains to the correct site content. SSL certificates are managed by Firebase's integration with certificate authorities, automatically renewing them. Deploy commands update only the specified site's files on the CDN, keeping other sites untouched.

Why designed this way?

Firebase was built to simplify web hosting by hiding complex infrastructure details. Multiple site hosting in one project reduces overhead for developers managing related sites. Automatic SSL and CDN use improve security and speed without manual setup. This design balances ease of use with powerful features, avoiding the need for separate projects or manual server management.

┌─────────────────────────────┐
│       Firebase Project       │
│ ┌───────────────┐           │
│ │ firebase.json │           │
│ └──────┬────────┘           │
│        │                    │
│ ┌──────▼───────┐ ┌─────────┐│
│ │ Site A Files │ │ Site B   ││
│ │ (folder)     │ │ Files    ││
│ └──────────────┘ │ (folder) ││
│                  └─────────┘│
│        │                    │
│ ┌──────▼───────────────┐    │
│ │ Firebase Hosting CDN  │    │
│ └─────────┬────────────┘    │
│           │                 │
│ ┌─────────▼────────────┐    │
│ │ Custom Domains & SSL │    │
│ └─────────────────────┘    │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think each Firebase hosting site requires a separate Firebase project? Commit to yes or no.

Common Belief: Each website must have its own Firebase project to be hosted.

Reality: One Firebase project can host multiple independent websites using multiple site hosting.

Why it matters: Believing this causes unnecessary project sprawl, higher costs, and harder management.

Quick: Do you think deploying one site updates all sites in the project? Commit to yes or no.

Common Belief: Deploying hosting always updates every site in the Firebase project.

Reality: You can deploy individual sites separately without affecting others using targeted deploy commands.

Why it matters: Thinking otherwise risks accidental overwrites and downtime for unrelated sites.

Quick: Do you think Firebase requires manual SSL setup for each custom domain? Commit to yes or no.

Common Belief: You must manually obtain and renew SSL certificates for each custom domain.

Reality: Firebase automatically provisions and renews SSL certificates for all custom domains.

Why it matters: Misunderstanding this leads to wasted time and potential security gaps.

Quick: Do you think hosting many sites in one project slows down site delivery? Commit to yes or no.

Common Belief: Multiple sites in one project share resources and slow down each other's performance.

Reality: Each site is served independently via CDN, so performance is not degraded by multiple sites.

Why it matters: Believing this may cause unnecessary splitting of projects and complexity.

Expert Zone

1

Firebase hosting billing is per project, so heavy traffic on one site can affect overall costs for all sites in that project.

2

Using separate folders and clear naming in firebase.json prevents deployment mistakes and makes CI/CD pipelines easier to maintain.

3

Firebase's automatic SSL provisioning uses DNS verification, which can delay domain activation if DNS records are not set correctly.

When NOT to use

Multiple site hosting is not ideal when sites require completely isolated environments for security or compliance reasons. In such cases, separate Firebase projects or different cloud providers should be used. Also, if billing needs to be strictly separated per site, individual projects are better.

Production Patterns

Professionals use multiple site hosting to manage staging, production, and marketing sites under one project. They automate deployments with CI/CD tools like GitHub Actions, deploying only changed sites. Custom domains and SSL are managed centrally, and usage monitoring alerts prevent unexpected costs.

Connections

Content Delivery Networks (CDN)

Multiple site hosting builds on CDN technology to deliver each site quickly and securely.

Understanding CDNs helps grasp how Firebase serves multiple sites efficiently worldwide.

Domain Name System (DNS)

Custom domains for multiple sites rely on DNS configuration to route visitors correctly.

Knowing DNS basics clarifies how domain verification and site access work in multi-site hosting.

Shopping Mall Management

Both involve managing multiple independent units under one roof with shared resources.

This cross-domain link shows how organizing multiple sites is like managing stores, balancing independence and shared infrastructure.

Common Pitfalls

#1 Deploying all sites when only one needs updating.

Wrong approach:

firebase deploy --only hosting

Correct approach:

firebase deploy --only hosting:siteName

Root cause:

Not knowing how to target specific sites causes unnecessary full deployments risking downtime.

#2 Using the same folder for multiple sites without configuration.

Wrong approach:

firebase.json with one hosting target pointing to a shared folder for all sites.

Correct approach:

firebase.json with separate hosting targets, each pointing to its own folder.

Root cause:

Misunderstanding site isolation leads to content overwrites and deployment confusion.

#3 Skipping domain verification steps for custom domains.

Wrong approach:

Adding custom domain in Firebase console but not updating DNS records.

Correct approach:

Adding custom domain and correctly setting DNS TXT and A records as instructed.

Root cause:

Ignoring DNS setup delays domain activation and SSL provisioning.

Key Takeaways

Multiple site hosting in Firebase lets you manage several websites under one project, saving time and resources.

Each site has its own folder and configuration, allowing independent deployment and updates.

Custom domains and SSL certificates are handled automatically, making sites secure and professional.

Understanding deployment commands and configuration prevents mistakes and downtime.

Large projects benefit from automation and monitoring to control costs and maintain quality.

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