Hosting setup and deployment in Firebase - Step-by-Step Execution

Process Flow - Hosting setup and deployment

Install Firebase CLI

↓

Login to Firebase

↓

Initialize Hosting

↓

Build Project Files

↓

Deploy to Firebase Hosting

↓

Access Website URL

This flow shows the steps to set up and deploy a website using Firebase Hosting from installation to accessing the live site.

Execution Sample

Firebase

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy --only hosting

These commands install tools, log in, initialize hosting, build files, and deploy the site to Firebase Hosting.

Process Table

Step	Command	Action	Result
1	npm install -g firebase-tools	Install Firebase CLI globally	Firebase CLI installed
2	firebase login	Authenticate user with Firebase	User logged in successfully
3	firebase init hosting	Set up hosting config files	firebase.json and public folder created
4	npm run build	Build project files for deployment	Compiled files ready in 'build' or 'public' folder
5	firebase deploy --only hosting	Upload files to Firebase Hosting	Site deployed and live URL provided
6	Access website URL	Open deployed site in browser	Website loads from Firebase Hosting

💡 Deployment complete, site is live and accessible

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
Firebase CLI	Not installed	Installed	Installed	Installed	Installed	Installed	Installed
User Login Status	Logged out	Logged out	Logged in	Logged in	Logged in	Logged in	Logged in
Hosting Config	None	None	None	Initialized	Initialized	Initialized	Initialized
Build Files	None	None	None	None	Built	Built	Built
Deployment Status	Not deployed	Not deployed	Not deployed	Not deployed	Not deployed	Deployed	Deployed

Key Moments - 3 Insights

Why do we need to run 'firebase init hosting' before deploying?

Because 'firebase init hosting' creates the configuration files and folder structure needed for Firebase to know what to deploy, as shown in step 3 of the execution_table.

What happens if you try to deploy without building your project files?

The deployment will upload no or incomplete files, so the site won't work properly. Step 4 shows building files is necessary before deployment in step 5.

Why must you login with 'firebase login' before deploying?

Firebase needs to verify your identity to allow deployment. Step 2 shows login is required before initialization and deployment.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result after running 'firebase init hosting'?

A firebase.json and public folder created

B User logged in successfully

C Site deployed and live URL provided

D Compiled files ready in 'build' or 'public' folder

💡 Hint

Check step 3 in the execution_table for the result of 'firebase init hosting'

At which step does the deployment status change to 'Deployed'?

A Step 4

B Step 2

C Step 5

D Step 3

💡 Hint

Look at the variable_tracker row 'Deployment Status' and see when it changes

If you skip 'npm run build', what will be the likely result in the deployment?

A Deployment will succeed with all files

B No files or incomplete files will be deployed

C Firebase CLI will not be installed

D User will not be logged in

💡 Hint

Refer to key_moments explanation about building files before deployment

Concept Snapshot

Firebase Hosting Setup & Deployment:
1. Install Firebase CLI globally.
2. Login with 'firebase login'.
3. Initialize hosting with 'firebase init hosting' to create config.
4. Build your project files (e.g., 'npm run build').
5. Deploy with 'firebase deploy --only hosting'.
6. Access your live site URL.

Full Transcript

This visual execution shows how to set up and deploy a website using Firebase Hosting. First, you install the Firebase CLI tool globally on your computer. Then, you log in to your Firebase account to authenticate. Next, you initialize hosting which creates the necessary configuration files and folders. After that, you build your project files so they are ready for deployment. Then, you deploy only the hosting part to Firebase, which uploads your files and makes your site live. Finally, you can open the provided URL to see your website hosted on Firebase. Each step updates the state of your tools, login status, configuration, build files, and deployment status. Key moments include understanding why initialization and building are necessary before 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