Firebase Hosting Basics

hosting-basics

This skill provides instructions and references for working with Firebase Hosting, a fast and secure hosting service for your web app, static and dynamic content, and microservices.

Overview

Firebase Hosting provides production-grade web content hosting for developers. With a single command, you can deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

Key Features:

• Fast Content Delivery: Files are cached on SSDs at CDN edges around the world.
• Secure by Default: Zero-configuration SSL is built-in.
• Preview Channels: View and test changes on temporary preview URLs before deploying live.
• GitHub Integration: Automate previews and deploys with GitHub Actions.
• Dynamic Content: Serve dynamic content and microservices using Cloud Functions or Cloud Run.

Hosting vs App Hosting

Choose Firebase Hosting if:

• You are deploying a static site (HTML/CSS/JS).
• You are deploying a simple SPA (React, Vue, etc. without SSR).
• You want full control over the build and deploy process via CLI.

Choose Firebase App Hosting if:

• You are using a supported full-stack framework like Next.js or Angular.
• You need Server-Side Rendering (SSR) or ISR.
• You want an automated "git push to deploy" workflow with zero configuration.

Instructions

1. Configuration (firebase.json)

For details on configuring Hosting behavior, including public directories, redirects, rewrites, and headers, see configuration.md.

2. Deploying

For instructions on deploying your site, using preview channels, and managing releases, see deploying.md.

3. Emulation

To test your app locally:

npx -y firebase-tools@latest emulators:start --only hosting

This serves your app at http://localhost:5000 by default.

Hosting Configuration (firebase.json)

The hosting section of firebase.json configures how your site is deployed and served.

Key Attributes

public (Required)

Specifies the directory to deploy to Firebase Hosting.

"hosting": {
  "public": "public"
}

ignore (Optional)

Files to ignore on deploy. Uses glob patterns (like .gitignore). Default ignores: firebase.json, **/.*, **/node_modules/**

redirects (Optional)

URL redirects to prevent broken links or shorten URLs.

"redirects": [
  {
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  }
]

rewrites (Optional)

Serve the same content for multiple URLs, useful for SPAs or Dynamic Content.

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  },
  {
    "source": "/api/**",
    "function": "apiFunction"
  },
  {
    "source": "/container/**",
    "run": {
      "serviceId": "helloworld",
      "region": "us-central1"
    }
  }
]

headers (Optional)

Custom response headers.

"headers": [
  {
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [
      {
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      }
    ]
  }
]

cleanUrls (Optional)

If true, drops .html extension from URLs.

"cleanUrls": true

trailingSlash (Optional)

Controls trailing slashes in static content URLs.

• true: Adds trailing slash.
• false: Removes trailing slash.

Full Example

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

Deploying to Firebase Hosting

Standard Deployment

To deploy your Hosting content and configuration to your live site:

npx -y firebase-tools@latest deploy --only hosting

This deploys to your default sites (PROJECT_ID.web.app and PROJECT_ID.firebaseapp.com).

Preview Channels

Preview channels allow you to test changes on a temporary URL before going live.

Deploy to a Preview Channel

npx -y firebase-tools@latest hosting:channel:deploy CHANNEL_ID

Replace CHANNEL_ID with a name (e.g., feature-beta). This returns a preview URL like PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app.

Expiration

Channels expire after 7 days by default. To set a different expiration:

npx -y firebase-tools@latest hosting:channel:deploy CHANNEL_ID --expires 1d

Cloning to Live

You can promote a version from a preview channel to your live channel without rebuilding.

npx -y firebase-tools@latest hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

Example: Clone the feature-beta channel on your default site to live:

npx -y firebase-tools@latest hosting:clone my-project:feature-beta my-project:live