Multiple site hosting in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Architecture

intermediate

How does Firebase handle multiple site hosting within a single project?

You have a Firebase project and want to host two different websites under the same project. How does Firebase manage this?

A Firebase requires creating separate projects for each site; multiple sites in one project are not supported.

B Firebase uses different branches in Git to host multiple sites from the same project.

C Firebase merges all site files into one public directory and serves them under different URLs automatically.

D Firebase allows multiple sites by defining separate hosting targets in the firebase.json file, each with its own public directory.

💡 Hint

Think about how configuration files define hosting behavior.

Firebase supports multiple sites in one project by defining multiple hosting targets in the firebase.json file. Each target points to a different folder, allowing separate sites under one project.

❓ Configuration

intermediate

What is the correct firebase.json snippet to host two sites named 'main' and 'blog'?

Choose the firebase.json snippet that correctly configures hosting for two sites: 'main' and 'blog', each with its own folder.

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

B { "hosting": { "main": { "public": "main-site" }, "blog": { "public": "blog-site" } } }

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

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

💡 Hint

Look for the correct use of 'target' and array structure.

The correct firebase.json uses an array under 'hosting' with objects specifying 'target' and 'public' keys for each site.

❓ service_behavior

advanced

What happens if you deploy multiple sites with overlapping public directories in Firebase?

You configure two hosting targets with the same public directory and deploy both. What is the expected behavior?

A Firebase throws an error during deployment and stops the process due to overlapping directories.

B Firebase deploys both sites successfully, but the last deployed site overwrites the files, causing conflicts.

C Firebase merges the files from both sites and serves a combined site without errors.

D Firebase ignores the second deployment and keeps the first site's files intact.

💡 Hint

Think about file system behavior when writing to the same folder twice.

Deploying multiple sites with the same public directory causes the last deployment to overwrite files, leading to conflicts and unexpected behavior.

❓ security

advanced

How can you restrict access to one of multiple Firebase hosted sites within the same project?

You have two sites hosted in one Firebase project. You want to restrict access to one site only to authenticated users. How can you achieve this?

A Use Firebase Hosting rewrite rules to redirect unauthenticated users to a login page for that site.

B Use Firebase Storage security rules to restrict access to the hosting files.

C Set up separate Firebase projects for each site to apply different security rules.

D Configure Google Cloud IAM roles to block access to the site URL.

💡 Hint

Think about how hosting can control routing and access based on user state.

Firebase Hosting can use rewrite rules combined with Firebase Authentication to restrict access by redirecting unauthenticated users to login pages.

✅ Best Practice

expert

What is the recommended approach to manage environment-specific configurations for multiple Firebase hosted sites in one project?

You have multiple sites hosted in one Firebase project for different environments (dev, staging, production). How should you manage environment-specific settings like API keys or feature flags?

A Use Firebase Remote Config to manage environment variables dynamically for all sites.

B Store all environment configs in one file and use client-side code to select the right config based on URL.

C Use separate hosting targets with different public folders containing environment-specific config files, and deploy accordingly.

D Manually edit the firebase.json file before each deployment to change environment variables.

💡 Hint

Consider how static files and deployment targets can separate environments.

Best practice is to use separate hosting targets with distinct public folders for each environment, each containing its own config files, ensuring clean separation and easy deployment.

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