Why Firebase Hosting serves web apps - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Firebase Hosting deliver your web app to users?

Firebase Hosting is designed to serve web apps quickly and securely. What is the main way Firebase Hosting delivers your web app files to users?

A It stores your app files on Google's global servers and sends them directly to users via a fast content delivery network.

B It runs your app code on a virtual machine and streams the output to users in real time.

C It sends your app files to users only when they request them through a peer-to-peer network.

D It compiles your app files into a mobile app and sends it to users automatically.

💡 Hint

Think about how websites usually load fast from servers close to you.

Firebase Hosting uses a global content delivery network (CDN) to store and serve your web app files from servers near users. This makes loading fast and reliable.

❓ service_behavior

intermediate

What happens when you deploy a new version of your web app to Firebase Hosting?

After you deploy a new version of your web app to Firebase Hosting, what is the expected behavior for users visiting your site?

A Firebase sends an email to users to notify them about the new version.

B Users must clear their browser cache manually to see the new version.

C Users immediately see the new version because Firebase updates the files on all CDN servers globally.

D The new version is only available on the main server and not on CDN servers.

💡 Hint

Think about how hosting services keep your site updated everywhere.

Firebase Hosting updates all CDN servers globally so users get the latest version immediately when they visit your site.

❓ Architecture

advanced

Why does Firebase Hosting use a CDN for web apps?

Firebase Hosting uses a content delivery network (CDN) to serve web apps. Which of the following is the main architectural reason for this?

A To reduce latency by serving content from servers geographically closer to users.

B To run backend code faster by using edge computing.

C To store user data securely in encrypted databases.

D To convert web apps into native mobile apps automatically.

💡 Hint

Think about how distance affects loading speed.

Using a CDN reduces the physical distance between users and servers, lowering latency and speeding up content delivery.

❓ security

advanced

How does Firebase Hosting ensure secure delivery of web apps?

Firebase Hosting serves web apps securely. Which feature helps protect users by encrypting data between the server and their browser?

A Firewall rules that block all incoming traffic.

B Disabling all JavaScript in the hosted web app.

C User passwords stored in plain text for easy access.

D Automatic HTTPS with SSL/TLS certificates for all hosted sites.

💡 Hint

Think about how websites show a lock icon in the browser address bar.

Firebase Hosting automatically provides HTTPS with SSL/TLS certificates, encrypting data and protecting users from eavesdropping.

✅ Best Practice

expert

What is the best practice to optimize Firebase Hosting for fast web app delivery?

To make your web app load faster on Firebase Hosting, which practice should you follow?

A Upload large uncompressed images to reduce server load.

B Minify and compress your HTML, CSS, and JavaScript files before deploying.

C Disable caching so users always get fresh files from the server.

D Use only inline styles and scripts to avoid external file requests.

💡 Hint

Think about reducing file size to speed up downloads.

Minifying and compressing files reduces their size, making downloads faster and improving user experience.

Practice

1. Why does Firebase Hosting serve web apps over HTTPS by default?

easy

A. To make the website load slower

B. To disable images from loading

C. To block users from accessing the app

D. To keep the connection secure and protect user data

Solution

1. Step 1: Understand HTTPS purpose

   HTTPS encrypts data between the user and the server to keep it safe from attackers.

2. Step 2: Apply to Firebase Hosting

   Firebase Hosting uses HTTPS by default to protect users visiting your web app.

3. Final Answer:

   To keep the connection secure and protect user data -> Option D

4. Quick Check:

   HTTPS = Secure connection [OK]

Hint: HTTPS means secure connection, always used by Firebase Hosting [OK]

Common Mistakes:

• Thinking HTTPS slows down the site
• Believing HTTPS blocks users
• Confusing HTTPS with disabling images

2. Which file does Firebase Hosting usually serve first when loading a single-page web app?

easy

A. index.html

B. style.css

C. main.js

D. firebase.json

Solution

1. Step 1: Identify the entry point for web apps

   Single-page apps start by loading the main HTML file, which is usually index.html.

2. Step 2: Confirm Firebase Hosting behavior

   Firebase Hosting serves index.html first to load the app shell and then loads scripts and styles.

3. Final Answer:

   index.html -> Option A

4. Quick Check:

   First file loaded = index.html [OK]

Hint: Web apps start with index.html file [OK]

Common Mistakes:

• Choosing JavaScript or CSS files as first load
• Confusing config files like firebase.json as entry
• Not knowing the role of index.html

3. Given this Firebase Hosting rewrite rule in firebase.json:

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

What happens when a user visits /profile in a single-page app?

medium

A. The server returns a 404 error because /profile does not exist

B. The server serves the index.html file so the app can handle the route

C. The server redirects the user to the homepage URL

D. The server serves a blank page

Solution

1. Step 1: Understand the rewrite rule

   The rule sends all requests (**) to /index.html, regardless of the URL path.

2. Step 2: Apply to /profile URL

   When user visits /profile, Firebase Hosting serves index.html, letting the app's JavaScript handle the route.

3. Final Answer:

   The server serves the index.html file so the app can handle the route -> Option B

4. Quick Check:

   Rewrite all URLs to index.html = The server serves the index.html file so the app can handle the route [OK]

Hint: Rewrite '**' to index.html serves all app routes [OK]

Common Mistakes:

• Expecting 404 error for app routes
• Thinking server redirects to homepage
• Assuming blank page is served

4. A developer sets up Firebase Hosting but their single-page app shows a 404 error on routes like /dashboard. What is the likely fix?

medium

A. Add a rewrite rule in firebase.json to send all routes to /index.html

B. Remove the index.html file from the hosting folder

C. Disable HTTPS in Firebase Hosting settings

D. Change the app to use multiple HTML files for each route

Solution

1. Step 1: Identify cause of 404 on app routes

   Without rewrite rules, Firebase Hosting looks for actual files matching the URL and returns 404 if missing.

2. Step 2: Apply rewrite rule fix

   Adding a rewrite rule to send all routes to /index.html lets the app handle routing and prevents 404 errors.

3. Final Answer:

   Add a rewrite rule in firebase.json to send all routes to /index.html -> Option A

4. Quick Check:

   Rewrite rule fixes 404 on SPA routes [OK]

Hint: Rewrite all routes to index.html to fix SPA 404 errors [OK]

Common Mistakes:

• Deleting index.html file
• Disabling HTTPS thinking it helps
• Using multiple HTML files instead of SPA routing

5. You want your Firebase Hosting to serve a React single-page app that uses client-side routing. Which configuration ensures all URLs load your app correctly?

hard

A. Disable rewrites and rely on default file serving

B. Upload separate HTML files for each route like /about.html and /contact.html

C. Set a rewrite rule in firebase.json to send all requests to /index.html

D. Use HTTP instead of HTTPS to avoid routing issues

Solution

1. Step 1: Understand React SPA routing needs

   React SPA uses client-side routing, so all URLs must load the same index.html to let JavaScript handle routes.

2. Step 2: Configure Firebase Hosting rewrites

   Adding a rewrite rule sending all requests to /index.html ensures the app loads correctly on any URL.

3. Final Answer:

   Set a rewrite rule in firebase.json to send all requests to /index.html -> Option C

4. Quick Check:

   Rewrite all URLs to index.html for SPA routing [OK]

Hint: Rewrite all URLs to index.html for React SPA [OK]

Common Mistakes:

• Uploading multiple HTML files for SPA routes
• Disabling rewrites causing 404 errors
• Switching to HTTP thinking it fixes routing