Firebasecloud~30 mins

Why Firebase Hosting serves web apps - See It in Action

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Time

Why Firebase Hosting Serves Web Apps

📖 Scenario: You want to share your simple web app with friends and users worldwide. You decide to use Firebase Hosting, a service that puts your web files on the internet so anyone can open your app in their browser.

🎯 Goal: Build a basic Firebase Hosting setup that serves a simple web app with an index.html file.

📋 What You'll Learn

Create a folder named public with an index.html file inside

Add a Firebase configuration file firebase.json to specify hosting settings

Initialize Firebase Hosting to serve files from the public folder

Deploy the web app so it is accessible via a Firebase Hosting URL

💡 Why This Matters

🌍 Real World

Firebase Hosting is used by developers to quickly and securely publish web apps and static websites to the internet without managing servers.

💼 Career

Understanding Firebase Hosting is useful for frontend developers, web designers, and cloud engineers who want to deploy web apps easily and reliably.

Progress0 / 4 steps

Create the public/index.html file

Create a folder named public and inside it create a file called index.html with this exact content:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Firebase App</title></head><body><h1>Welcome to Firebase Hosting!</h1></body></html>

Firebase

# Create the folder 'public' and add 'index.html' with the specified content
# Your code here

Need a hint?

Make sure the file is named exactly index.html inside the public folder.

Add the firebase.json configuration file

Create a file called firebase.json in your project root with this exact content to tell Firebase Hosting to serve files from the public folder: { "hosting": { "public": "public", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"] } }

Firebase

# Create 'firebase.json' with hosting config
# Your code here

Need a hint?

This file tells Firebase which folder to use for hosting your web app files.

Initialize Firebase Hosting

Run the command firebase init hosting in your terminal to set up Firebase Hosting. When prompted, select the public folder. This step prepares your project for deployment.

Firebase

# Run 'firebase init hosting' in your terminal
# Your code here

Need a hint?

This command sets up Firebase Hosting in your project and links your files.

Deploy your web app to Firebase Hosting

Run the command firebase deploy --only hosting in your terminal to upload your web app files to Firebase Hosting. This makes your app available on the internet at the Firebase Hosting URL.

Firebase

# Run 'firebase deploy --only hosting' in your terminal
# Your code here

Need a hint?

This command uploads your files and makes your app live on Firebase Hosting.