Hosting setup and deployment in Firebase - Commands & Configuration

Introduction

Hosting setup and deployment lets you put your website or app online so anyone can visit it. It solves the problem of sharing your project with the world by uploading it to a server that handles visitors.

When you want to publish a personal website for friends and family to see.

When you build a web app and want users to access it from anywhere.

When you need a fast and secure way to serve static files like HTML, CSS, and JavaScript.

When you want to deploy updates quickly without complex server management.

When you want to use a free or low-cost hosting service with easy setup.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This file tells Firebase which folder to use for hosting your site files (public), which files to ignore during deployment, and how to handle URL routing with rewrites to index.html for single-page apps.

Commands

This command logs you into your Firebase account so you can access your projects and deploy your site.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

This command sets up Firebase Hosting in your project folder by creating configuration files and the public folder for your site files.

Terminal

firebase init hosting

Expected Output

=== Hosting Setup

? What do you want to use as your public directory? public

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? No

Firebase Hosting setup complete.

This command uploads your site files to Firebase Hosting and makes your site live on the internet.

Terminal

firebase deploy --only hosting

Expected Output

=== Deploying to 'your-project-id'



✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project-id/overview

Hosting URL: https://your-project-id.web.app

→

--only hosting - Deploy only the hosting part without affecting other Firebase services

This command opens a live preview channel URL for your hosting site, useful for testing before full deployment.

Terminal

firebase hosting:channel:open live

Expected Output

✔  Channel live is now live at https://live-your-project-id.web.app

Key Concept

If you remember nothing else from this pattern, remember: firebase deploy uploads your site files and makes your website live instantly.

Common Mistakes

Not running firebase login before deploying

You cannot deploy without being logged in, so the deploy command will fail.

Always run firebase login first to authenticate your account.

Deploying without specifying the correct public folder

Firebase will upload the wrong files or no files, so your site won't work as expected.

During firebase init hosting, set the public directory to the folder containing your site files, usually 'public'.

Forgetting to build your app before deploying

If you use frameworks like React or Angular, the public folder may not have the latest compiled files, so the deployed site is outdated or broken.

Run your build command (like npm run build) before firebase deploy to update the public folder.

Summary

Run firebase login to authenticate your Firebase account.

Use firebase init hosting to set up hosting configuration and public folder.

Deploy your site with firebase deploy --only hosting to make it live.

Use firebase hosting:channel:open live to preview your site before full 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