Why Firebase Hosting serves web apps - Visual Breakdown

Process Flow - Why Firebase Hosting serves web apps

User enters web app URL

↓

DNS resolves domain to Firebase Hosting servers

↓

Firebase Hosting receives HTTP request

↓

Firebase Hosting looks for matching files

↓

Serve static files (HTML, CSS, JS) to user

↓

User's browser loads and runs the web app

This flow shows how Firebase Hosting receives a user's request and serves the web app files so the browser can load and run the app.

Execution Sample

Firebase

User opens https://myapp.web.app
Firebase Hosting receives request
Firebase Hosting finds index.html
Firebase Hosting sends index.html
Browser loads app

This sequence shows the steps from user request to Firebase Hosting serving the web app files.

Process Table

Step	Action	Input/Request	Firebase Hosting Behavior	Output/Result
1	User enters URL	https://myapp.web.app	Waits for request	HTTP request sent to Firebase Hosting
2	DNS resolution	myapp.web.app	Resolves domain to Firebase Hosting IP	Request routed to Firebase Hosting server
3	Request received	HTTP GET /	Checks hosting config and files	Finds index.html file
4	Serve file	index.html	Reads file from hosting storage	Sends index.html content to browser
5	Browser loads	index.html content	Browser parses and runs app code	Web app appears and runs in browser
6	Exit	No more requests	Waits for next user request	End of this request cycle

💡 Request cycle ends after serving files and browser loads the app

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
User Request	None	Sent to Firebase Hosting	Received by Hosting	Processed for files	Response sent	Completed
File Served	None	None	index.html identified	index.html sent	Loaded by browser	Displayed

Key Moments - 2 Insights

Why does Firebase Hosting serve index.html when the user requests the root URL?

Because in the execution_table at Step 3, Firebase Hosting looks for the default file (index.html) to serve for the root path.

How does the user's browser get the web app code to run?

At Step 5 in the execution_table, the browser receives the HTML, CSS, and JS files from Firebase Hosting and loads them to run the app.

Visual Quiz - 3 Questions

Look at the execution_table, what file does Firebase Hosting serve at Step 4?

A 404.html

B app.js

C index.html

D style.css

💡 Hint

Check the 'File Served' column at Step 4 in the execution_table

At which step does the DNS resolve the domain to Firebase Hosting servers?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'DNS resolution' action in the execution_table

If the index.html file was missing, what would Firebase Hosting do at Step 3?

A Serve index.html anyway

B Serve a 404 error page

C Ignore the request

D Redirect to another domain

💡 Hint

Think about what happens when the requested file is not found in Step 3

Concept Snapshot

Firebase Hosting serves web apps by receiving user HTTP requests,
resolving the domain to its servers, finding the requested files (like index.html),
and sending them back to the browser.
The browser then loads and runs the app.
This process happens quickly to deliver static web app files securely.

Full Transcript

When a user enters a web app URL, the browser sends a request to Firebase Hosting. DNS resolves the domain to Firebase's servers. Firebase Hosting receives the HTTP request and looks for the matching files, usually index.html for the root URL. It then serves these static files like HTML, CSS, and JavaScript back to the browser. The browser loads these files and runs the web app. This flow ensures the web app is delivered quickly and securely to users.