Firebase Hosting Deep Dive: CDN, Custom Domains, Rewrites & Deployment

In this tutorial, you will learn about Firebase Hosting Deep Dive: CDN, Custom Domains, Rewrites & Deployment. We cover key concepts, practical examples, and best practices to help you master this topic.

Firebase Hosting provides fast, secure web hosting with a global CDN, one-click SSL, custom domain support, and deep integration with Cloud Functions and Cloud Run.

What You'll Learn

How to deploy sites with Firebase Hosting, configure custom domains, set up rewrite rules for SPAs and Serverless backends, use hosting channels for previews, and manage multi-site configurations.

Why It Matters

Traditional hosting requires CDN setup, SSL management, and server configuration. Firebase Hosting handles all of this automatically. DodaTech hosts the Antivirus Pro web dashboard, marketing site, and documentation on Firebase Hosting with zero configuration.

Real-World Use

A single-page app dashboard at dashboard.dodatech.com with API calls rewritten to Cloud Functions, a marketing site at dodatech.com, and preview channels for each Pull Request.

flowchart LR
    A["Firebase Hosting\nGlobal CDN"] --> B["Static Assets\nHTML, CSS, JS"]
    A --> C["Rewrite Rules"]
    C --> D["Cloud Functions\n/analyze"]
    C --> E["Cloud Run\n/api"]
    A --> F["Custom Domain\nSSH + CDN"]
    G["Git Push"] --> H["GitHub Action\nDeploy to Hosting"]
    H --> A
    style A fill:#dbeafe,stroke:#2563eb
    style C fill:#fef3c7,stroke:#d97706

Basic Deployment

# Initialize hosting
firebase init hosting

# Deploy to hosting
firebase deploy --only hosting

# Deploy a specific target
firebase deploy --only hosting:dashboard

Expected output:

✔  Uploading to firebase storage bucket
✔  Uploaded 47 files
✔  Starting deploy
✔  Deploy complete
✔  Project URL: https://durga-antivirus-pro.web.app
✔  Custom domain: https://dashboard.dodatech.com

Rewrite Rules for SPA and APIs

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*"],
    "rewrites": [
      {
        "source": "/api/**",
        "function": "apiGateway"
      },
      {
        "source": "/analyze",
        "run": {
          "serviceId": "threat-analyzer",
          "region": "us-central1"
        }
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Custom Domains

# Connect a custom domain
firebase hosting:channel:deploy preview-1

# Go to Firebase Console > Hosting > Add custom domain
# Add DNS records:
#   Type: A
#   Name: @
#   Value: 151.101.1.195 (Firebase IP)

#   Type: AAAA
#   Name: @
#   Value: 2a04:4e42::195 (Firebase IPv6)

#   Type: CNAME
#   Name: www
#   Value: durga-antivirus-pro.web.app

# Wait for propagation (up to 48 hours)
firebase hosting:clone preview-1 live

Preview Channels

# Create a preview channel for a PR
firebase hosting:channel:create pr-42

# Deploy to a preview channel
firebase deploy --only hosting:pr-42

# Get preview URL
firebase hosting:channel:open pr-42
# Opens: https://durga-antivirus-pro--pr-42.web.app

# List all channels
firebase hosting:channel:list

# Delete a channel
firebase hosting:channel:delete pr-42

Multi-Site Hosting

{
  "hosting": [
    {
      "site": "dashboard",
      "public": "apps/dashboard/dist",
      "target": "dashboard",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "site": "docs",
      "public": "apps/docs/public",
      "target": "docs",
      "rewrites": []
    },
    {
      "site": "marketing",
      "public": "apps/landing/out",
      "target": "marketing"
    }
  ]
}

# Deploy a specific site
firebase target:apply hosting dashboard dashboard.dodatech.com
firebase target:apply hosting docs docs.dodatech.com
firebase target:apply hosting marketing dodatech.com

firebase deploy --only hosting:dashboard,hosting:docs

Custom 404 and Headers

{
  "hosting": {
    "public": "dist",
    "appAssociation": "AUTO",
    "cleanUrls": true,
    "trailingSlash": false,
    "errorPage": "404.html",
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png|webp)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public,max-age=31536000,immutable"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      },
      {
        "source": "/api/**",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  }
}

Common Mistakes

1. Not Configuring Cache Headers

Without cache headers, browsers re-download assets on every visit. Cache static assets (images, JS, CSS) long-term and use content hashing for cache busting.

2. Missing SPA Rewrite Rule

Single-page apps need a catch-all rewrite (source: "**" destination: "/index.html"). Without it, direct URL access returns 404.

3. Deploying Without Testing Preview Channels

Deploying directly to production breaks the site if issues are discovered later. Use preview channels for every PR and test before merging.

4. Overlooking DNS Propagation Time

Custom domain verification can take up to 48 hours. Plan domain transitions ahead and validate DNS records before removing old hosting.

5. Ignoring CDN Cache Invalidation

Firebase Hosting CDN caches content aggressively. After updating critical files, either use content hashing in filenames or wait for cache TTL to expire.

Practice Questions

1. How do you configure a single-page app with Firebase Hosting?
2. What is a hosting preview channel and why use it?
3. How do you host multiple sites in one Firebase project?
4. How do you set up custom domain with Firebase Hosting?

Answers:

1. Add a rewrite rule source: "**" destination: "/index.html" to serve index.html for all routes, letting client-side routing handle navigation.
2. A preview channel creates a temporary URL for each deployment (like a PR preview), enabling testing before promoting to production.
3. Use multi-site configuration in firebase.json with separate target names, then deploy each target to its own custom domain.
4. Add the domain in Firebase Console, create A and AAAA records pointing to Firebase IPs, then verify ownership.

Challenge: Deploy a multi-site Firebase Hosting setup: a SPA dashboard (rewrite to index.html, API calls to Cloud Functions), a doc site (clean URLs, 404 page), and a marketing site (with preview channels for each PR).

FAQ

Mini Project

Deploy a production-ready hosting setup: Flask/React SPA dashboard with Cloud Functions API rewrites, custom domain with SSL, preview channels for all PRs, proper cache headers for static assets, and a multi-site config for dashboard + marketing.

What's Next

Firebase Cloud Messaging — send push notifications to web and mobile devices.