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.