How to Host a Website on Firebase Hosting (Step-by-Step)

Introduction

Firebase Hosting lets you deploy static websites and single-page apps (SPAs) with a global CDN and free SSL. It’s great for quick prototypes, portfolios, and simple React/Vue apps.

Why use Firebase Hosting?

Free tier for hobby projects
Global CDN + automatic HTTPS
Simple CLI deploy (firebase deploy)
Works well with SPAs (custom rewrites)

Prerequisites

A Google account
Node.js and npm installed
A site or frontend app you can build locally

Step 1: Install the Firebase CLI

Code · batchfile

npm install -g firebase-tools

Then log in:

Code · batchfile

firebase login

Step 2: Initialize your project

From your project folder:

Code · batchfile

firebase init hosting

Answer the prompts:

Use an existing project (or create a new one)
Public directory:
- For static HTML → public (put index.html there)
- For React (CRA) → build
- For Vite/Vue/etc. → dist
Configure as a single-page app (rewrite all URLs to /index.html)?
- Yes for React/Vue SPAs
- No, for plain static HTML
Set up automatic builds and deploys with GitHub? Optional.

This creates a firebase.json and (usually) a .firebaserc.

Step 3: Build (if using a framework)

React (CRA): npm run build → outputs build/
Vite, Vue, Svelte, Astro: npm run build → outputs dist/

Ensure your public directory in firebase.json matches the output folder.

Step 4: Deploy

Code · batchfile

firebase deploy

You’ll get two URLs:

Hosting URL (production)
On-the-fly preview URL (if using preview channels)

Open the Hosting URL — your site is live

Optional: Custom domain

In the Firebase console → Hosting → Add custom domain.
Follow the DNS verification steps. SSL is issued automatically.

SPA routing (important for React/Vue)

If you see 404s on refresh, make sure firebase.json includes a rewrite:

Code · json

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

For static HTML sites, you can omit the rewrites section.

Troubleshooting

Permission/CLI errors: run firebase logout then firebase login again.
Wrong folder deployed: make sure the "public" path firebase.json points to the built output.
Build failed locally: run npm ci && npm run build and read the terminal errors.
Headers/caching: add a headers section firebase.json if you need custom cache rules.