firebase-app-hosting-basics

App Hosting Basics

Description

This skill enables the agent to deploy and manage modern, full-stack web applications (Next.js, Angular, etc.) using Firebase App Hosting.

Important: In order to use App Hosting, your Firebase project must be on the Blaze pricing plan. Direct the user to https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered to upgrade their plan. The Blaze plan charges pay as you go for usage. Inform the user of this and let the user make any billing change themselves.

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.

Deploying to App Hosting

The commands below run the Firebase CLI through npx, which downloads firebase-tools@latest from npm. Prefer a reviewed, locally installed Firebase CLI when the project has one, and ask the user before letting npx download the package.

Deploy from Source

This is the recommended flow for most users.

1. Configure firebase.json with an apphosting block.

   {
     "apphosting": {
       "backendId": "my-app-id",
       "rootDir": "/",
       "ignore": [
         "node_modules",
         ".git",
         ".next",
         ".vercel",
         "firebase-debug.log",
         "firebase-debug.*.log",
         "functions"
       ]
     }
   }

   Keep local .env* files, private keys, and service account credential files out of the uploaded source by listing them in the ignore list. Before deploying, check that no such credential files remain in the root directory.

2. Create or edit apphosting.yaml- see Configuration for more information on how to do so.

3. Create the backend if it does not exist (apphosting:backends:list). Before creating it, confirm the project, backend ID, and region with the user. If a region hits its 10-backend quota, report the error to the user and ask which region to use instead, such as us-east4, then pass it with --primary-region:

   npx firebase-tools@latest apphosting:backends:create --backend my-app-id --primary-region us-central1 --root-dir /

4. For sensitive keys/secrets (e.g., from .env*), identify only which variable names need secrets; the user enters the values. Keep secret values out of commands, output, and your own context. After creating the backend, have the user run the first command below and type the value at the CLI prompt, then grant access, and reference the secret via secret: (never value:):

   npx firebase-tools@latest apphosting:secrets:set <secret-name>
   npx firebase-tools@latest apphosting:secrets:grantaccess <secret-name> --backend my-app-id

   Before setting a secret, ask the user whether a secret with that name already exists, and replace an existing value only after the user confirms the exact secret name and project. Before granting access, confirm the secret name, backend ID, and project with the user, and grant access only to secrets that apphosting.yaml references.

5. Run npx firebase-tools@latest deploy only after the user explicitly approves this deploy.

Automated deployment via GitHub (CI/CD)

Alternatively, set up a backend connected to a GitHub repository for automated "git push" deployments. Connect only a protected live branch that requires pull request review and passing checks, and confirm the repository and branch with the user before connecting. For GitHub-connected backends, trigger rollouts with npx firebase-tools@latest apphosting:rollouts:create <backend-id> --git-branch <branch> only after the user approves the rollout for the named backend and branch (do not use rollouts:create when deploying from local source with deploy).

For other backend or secret flags (backends:get, backends:delete, etc.), run npx firebase-tools@latest <command> --help. Run backends:delete or any other command that deletes or replaces backends or secrets only after the user confirms the exact resource name and project.

Emulation

See Emulation for more information on how to test your app locally using the Firebase Local Emulator Suite.