Firebase Hosting Setup

Firebase Hosting puts your web app on the internet using Google's global CDN. Every hosted site gets an SSL certificate automatically, loads fast from servers near your users, and deploys with a single command. Setup takes about five minutes.

What Firebase Hosting Provides

• Free SSL certificate (HTTPS) for every site
• Global CDN — files served from locations near each user
• Free subdomain: your-project.web.app and your-project.firebaseapp.com
• Custom domain support with automatic certificate renewal
• Rollback to any previous deployment in one click
• Preview channels for testing before going live

The CDN Advantage

A CDN (Content Delivery Network) stores copies of your files in data centers around the world. When a user in Tokyo visits your app, they receive files from a nearby Tokyo server rather than one in the United States. This reduces load time significantly.

Without CDN:
User in Tokyo ---(very long distance)---> Server in US ---> Response in ~300ms

With Firebase CDN:
User in Tokyo ---(nearby)---> CDN server in Tokyo ---> Response in ~20ms

Step 1 — Install the Firebase CLI

npm install -g firebase-tools

Step 2 — Log In

firebase login

A browser window opens for you to log in with your Google account. After logging in, return to the terminal.

Step 3 — Initialize Hosting

Navigate to your project folder in the terminal and run:

firebase init hosting

Firebase asks several questions:

Which Firebase project?

Select an existing project or create a new one. Firebase links the current folder to that project.

What is your public directory?

This is the folder containing the files Firebase will deploy. Common answers:

• public — for plain HTML/CSS/JS projects
• dist — for projects built with Vite, Vue CLI, or Create React App
• build — for Create React App projects using the older build output
• out — for Next.js static exports

Single-page app?

Answer Yes if your app uses client-side routing (React Router, Vue Router). Firebase rewrites all URL paths to index.html so the JavaScript router handles navigation. Answer No for traditional multi-page websites.

Automatic builds with GitHub?

Answer No for now unless you want to set up automatic deployment from GitHub. This can be configured later.

What Firebase Creates

Firebase adds two files to your project:

firebase.json        — hosting configuration
.firebaserc          — project ID mapping

A typical firebase.json for a single-page app:

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

The rewrites section tells Firebase to serve index.html for any URL that doesn't match a static file. This is what enables client-side routing to work.

Hosting Configuration Options

Custom Headers

"headers": [
  {
    "source": "**/*.@(js|css)",
    "headers": [
      { "key": "Cache-Control", "value": "max-age=31536000" }
    ]
  }
]

Redirects

"redirects": [
  {
    "source": "/old-page",
    "destination": "/new-page",
    "type": 301
  }
]

Key Takeaway

Firebase Hosting setup requires three steps: install the CLI, log in, and run firebase init hosting. Choose the correct public directory for your framework's build output. Enable the SPA rewrite if your app uses client-side routing. Firebase creates firebase.json and .firebaserc to store your hosting configuration. After setup, you deploy with one command.