Hosting setup and deployment in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

Firebase Hosting: Default Behavior of index.html

When you deploy a Firebase Hosting site without specifying any rewrite rules, what happens when a user visits the root URL of your site?

A Firebase redirects the user to a default Firebase welcome page hosted externally.

B Firebase serves the index.html file from the public directory by default.

C Firebase returns a 404 error because no rewrite rules are set.

D Firebase serves a blank page with no content.

💡 Hint

Think about what file Firebase Hosting looks for by default in your public folder.

Firebase Hosting automatically serves the index.html file located in the public directory when the root URL is accessed, unless you configure rewrites or redirects.

❓ Configuration

intermediate

firebase.json: Correct Hosting Configuration

Which firebase.json configuration snippet correctly sets the public directory to 'dist' and enables single-page app (SPA) fallback to index.html?

A { "hosting": { "public": "dist", "rewrites": [{ "source": "**", "destination": "/index.html" }] } }

B { "hosting": { "public": "dist", "redirects": [{ "source": "**", "destination": "/index.html" }] } }

C { "hosting": { "public": "dist", "ignore": ["**/index.html"] } }

D { "hosting": { "public": "dist", "rewrites": [{ "source": "/index.html", "destination": "**" }] } }

💡 Hint

Look for the setting that rewrites all routes to index.html for SPA support.

The rewrites array with source '**' and destination '/index.html' tells Firebase Hosting to serve index.html for all routes, enabling SPA fallback.

❓ Architecture

advanced

Choosing Firebase Hosting for a Multi-Region App

You want to deploy a web app globally with Firebase Hosting to ensure fast load times worldwide. Which Firebase Hosting feature helps achieve this?

A Firebase Hosting only serves content from a single region, so you must use a third-party CDN.

B Firebase Hosting requires manual setup of multiple hosting sites in different regions.

C Firebase Hosting automatically uses a global CDN to serve content from edge locations closest to users.

D Firebase Hosting uses regional load balancers to route traffic to the nearest server.

💡 Hint

Think about how Firebase Hosting delivers static content quickly worldwide.

Firebase Hosting uses a global content delivery network (CDN) that caches and serves your content from edge locations near users automatically.

❓ security

advanced

Securing Firebase Hosting with HTTPS and Custom Domains

After adding a custom domain to your Firebase Hosting site, what does Firebase do to ensure secure HTTPS connections?

A Firebase automatically provisions and renews SSL certificates for your custom domain.

B You must manually upload your own SSL certificates to Firebase Hosting.

C Firebase only supports HTTP on custom domains unless you use a third-party CDN.

D Firebase requires you to configure DNS records to point to a secure proxy server.

💡 Hint

Consider how Firebase simplifies HTTPS setup for custom domains.

Firebase Hosting automatically provisions SSL certificates via Let's Encrypt for custom domains and renews them without user intervention.

✅ Best Practice

expert

Optimizing Firebase Hosting Deployments for Large Sites

You have a large site with thousands of static files. To speed up deployment times and reduce bandwidth, which approach is best when using Firebase Hosting?

A Disable caching in firebase.json to force fresh downloads on every user visit.

B Delete the entire public directory before each deploy to ensure a clean upload.

C Manually upload files via the Firebase console instead of using the CLI.

D Use the --only hosting:<site> flag to deploy only the hosting site you updated.

💡 Hint

Think about how to deploy only what changed to save time.

Using the --only hosting: flag deploys only the specified hosting site, avoiding unnecessary uploads and speeding deployment.

Practice

1. What is the main purpose of Firebase Hosting?

easy

A. To create databases for mobile apps

B. To write backend server code

C. To publish websites online without managing servers

D. To monitor app performance

Solution

1. Step 1: Understand Firebase Hosting's role

   Firebase Hosting is designed to host and serve web content easily without needing to manage servers.

2. Step 2: Differentiate from other Firebase services

   Other services like databases or backend code are separate from Hosting's purpose.

3. Final Answer:

   To publish websites online without managing servers -> Option C

4. Quick Check:

   Firebase Hosting = publish websites without servers [OK]

Hint: Remember Hosting is for websites, not databases or code [OK]

Common Mistakes:

• Confusing Hosting with Firebase database services
• Thinking Hosting manages backend code
• Assuming Hosting monitors app performance

2. Which command initializes Firebase Hosting in your project?

easy

A. firebase init hosting

B. firebase deploy --only hosting

C. firebase start hosting

D. firebase create hosting

Solution

1. Step 1: Identify the initialization command

   The command to set up Firebase Hosting configuration is firebase init hosting.

2. Step 2: Differentiate from deployment commands

   firebase deploy --only hosting publishes the site but does not initialize it.

3. Final Answer:

   firebase init hosting -> Option A

4. Quick Check:

   Initialize Hosting = firebase init hosting [OK]

Hint: Init sets up Hosting; deploy publishes it [OK]

Common Mistakes:

• Using deploy command to initialize
• Assuming 'firebase start hosting' exists
• Confusing create with init

3. After running firebase deploy --only hosting, what happens?

medium

A. Firebase deletes your local project files

B. Your website files are uploaded and become live at a Firebase URL

C. Your database is reset to default

D. Firebase Hosting configuration is removed

Solution

1. Step 1: Understand the deploy command effect

   The deploy command uploads your site files to Firebase Hosting and makes the site live.

2. Step 2: Eliminate incorrect options

   Deploy does not delete local files, reset databases, or remove configuration.

3. Final Answer:

   Your website files are uploaded and become live at a Firebase URL -> Option B

4. Quick Check:

   Deploy Hosting = upload and go live [OK]

Hint: Deploy publishes your site live on Firebase URL [OK]

Common Mistakes:

• Thinking deploy deletes local files
• Confusing deploy with database reset
• Assuming deploy removes Hosting setup

4. You ran firebase deploy --only hosting but your site did not update. What is a likely cause?

medium

A. You deployed to the wrong Firebase project

B. Your internet connection was too fast

C. You forgot to run firebase init hosting first

D. Firebase Hosting does not support updates

Solution

1. Step 1: Check project targeting

   If you deploy to the wrong Firebase project, your site won't update as expected.

2. Step 2: Rule out other options

   Init is needed only once; internet speed does not block updates; Hosting supports updates.

3. Final Answer:

   You deployed to the wrong Firebase project -> Option A

4. Quick Check:

   Wrong project deploy = no site update [OK]

Hint: Verify project ID before deploying [OK]

Common Mistakes:

• Assuming init must run every deploy
• Blaming internet speed for deployment failure
• Thinking Hosting can't update sites

5. You want to deploy only your website without affecting other Firebase services. Which command should you use?

hard

A. firebase deploy

B. firebase deploy --only database

C. firebase deploy --except hosting

D. firebase deploy --only hosting

Solution

1. Step 1: Understand deployment scope flags

   The --only hosting flag deploys just the Hosting service, leaving others untouched.

2. Step 2: Compare other options

   firebase deploy deploys all configured services; --only database deploys only database; --except hosting deploys all except Hosting.

3. Final Answer:

   firebase deploy --only hosting -> Option D

4. Quick Check:

   Deploy only Hosting = firebase deploy --only hosting [OK]

Hint: Use --only hosting to deploy just the website [OK]

Common Mistakes:

• Running deploy without --only and affecting all services
• Using --only database instead of hosting
• Using --except hosting to deploy Hosting