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](references/configuration.md).

### 2. Deploying
For instructions on deploying your site, using preview channels, and managing releases, see [deploying.md](references/deploying.md).

### 3. Emulation
To test your app locally:
```bash
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.
```json
"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.
```json
"redirects": [
  {
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  }
]
```

### `rewrites` (Optional)
Serve the same content for multiple URLs, useful for SPAs or Dynamic Content.
```json
"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  },
  {
    "source": "/api/**",
    "function": "apiFunction"
  },
  {
    "source": "/container/**",
    "run": {
      "serviceId": "helloworld",
      "region": "us-central1"
    }
  }
]
```

### `headers` (Optional)
Custom response headers.
```json
"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.
```json
"cleanUrls": true
```

### `trailingSlash` (Optional)
Controls trailing slashes in static content URLs.
- `true`: Adds trailing slash.
- `false`: Removes trailing slash.

## Full Example

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


# Deploying to Firebase Hosting

## Standard Deploy