Initial commit
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
---
|
||||
name: firebase-hosting-basics
|
||||
description: Skill for working with Firebase Hosting (Classic). Use this when you want to deploy static web apps, Single Page Apps (SPAs), or simple microservices. Do NOT use for Firebase App Hosting.
|
||||
---
|
||||
|
||||
# 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.
|
||||
@@ -0,0 +1,101 @@
|
||||
# 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
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,39 @@
|
||||
# Deploying to Firebase Hosting
|
||||
|
||||
## Standard Deployment
|
||||
To deploy your Hosting content and configuration to your live site:
|
||||
|
||||
```bash
|
||||
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
|
||||
```bash
|
||||
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:
|
||||
```bash
|
||||
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.
|
||||
|
||||
```bash
|
||||
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:
|
||||
```bash
|
||||
npx -y firebase-tools@latest hosting:clone my-project:feature-beta my-project:live
|
||||
```
|
||||
Reference in New Issue
Block a user