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.