Firebase App Hosting Basics
Deploy and operate Next.js or Angular full-stack apps on Firebase App Hosting with git-driven or CLI rollouts instead of hand-rolling SSR hosting.
Overview
Firebase App Hosting Basics is an agent skill most often used in Ship (also Operate) that deploys and manages Next.js/Angular-style full-stack web apps on Firebase App Hosting with SSR/ISR-friendly, source-based workflow
Install
npx skills add https://github.com/firebase/agent-skills --skill firebase-app-hosting-basicsWhat is this skill?
- Contrasts Firebase Hosting (static/SPA) vs App Hosting (Next.js, Angular, SSR/ISR)
- Documents firebase.json apphosting block with backendId, rootDir, and ignore patterns
- Covers recommended git-push-to-deploy and source-based deploy flows
- Calls out Blaze (metered) billing as a hard prerequisite with console upgrade path
- Targets zero-config full-stack framework deploys vs manual CLI-only static hosting
- Requires Firebase Blaze (metered) pricing plan
- Supports Next.js and Angular full-stack frameworks
- firebase.json apphosting block with backendId and rootDir
Adoption & trust: 73.6k installs on skills.sh; 345 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a Next.js or Angular app with SSR needs but only know static Firebase Hosting or a fragile custom deploy pipeline.
Who is it for?
Solo builders on the Blaze plan shipping Next.js or Angular who want git-push deploy and minimal hosting config.
Skip if: Pure static sites, simple client-only SPAs, or teams that refuse metered Firebase billing.
When should I use this skill?
Deploy and manage web apps with Firebase App Hosting when deploying Next.js/Angular apps with backends.
What do I get? / Deliverables
After the skill runs, you have a Blaze-ready App Hosting layout in firebase.json, a clear Hosting-vs-App-Hosting choice, and a repeatable source deploy path for your backend id.
- firebase.json apphosting configuration
- Documented deploy-from-source steps
- Hosting vs App Hosting decision for the app shape
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Shipping a full-stack web app is the first moment App Hosting configuration, backends, and rollouts matter in the solo journey. Launch prep under Ship is where you choose hosting, wire firebase.json, and push production backends before ongoing ops.
Where it fits
Choose App Hosting over static Hosting before the first production push of a Next.js storefront.
Adjust apphosting rootDir and ignore lists when adding a functions folder beside the web app.
Scaffold firebase.json apphosting block while wiring Firebase into the repo for the first time.
How it compares
Use for managed full-stack Firebase deploys—not classic Firebase Hosting CLI flows for static assets only.
Common Questions / FAQ
Who is firebase-app-hosting-basics for?
Indie and solo developers using Claude Code, Cursor, or Codex who deploy Next.js or Angular to Firebase and need SSR/ISR without building their own container pipeline.
When should I use firebase-app-hosting-basics?
During Ship launch prep when picking hosting for a full-stack framework, when configuring apphosting in firebase.json before first prod deploy, and during Operate infra work when rolling out or adjusting App Hosting backends after the app is live.
Is firebase-app-hosting-basics safe to install?
Treat it as deployment guidance that can trigger billing and cloud changes on Blaze; review the Security Audits panel on this Prism page and verify firebase.json and project settings before applying agent suggestions.
SKILL.md
READMESKILL.md - 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. ## 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 ### Deploy from Source This is the recommended flow for most users. 1. Configure `firebase.json` with an `apphosting` block. ```json { "apphosting": { "backendId": "my-app-id", "rootDir": "/", "ignore": [ "node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log", "functions" ] } } ``` 2. Create or edit `apphosting.yaml`- see [Configuration](references/configuration.md) for more information on how to do so. 3. If the app needs safe access to sensitive keys, use `npx -y firebase-tools@latest apphosting:secrets` commands to set and grant access to secrets. 4. Run `npx -y firebase-tools@latest deploy` when you are ready to deploy. ### Automated deployment via GitHub (CI/CD) Alternatively, set up a backend connected to a GitHub repository for automated deployments "git push" deployments. This is only recommended for more advanced users, and is not required to use App Hosting. See [CLI Commands](references/cli_commands.md) for more information on how to set this up using CLI commands. ## Emulation See [Emulation](references/emulation.md) for more information on how to test your app locally using the Firebase Local Emulator Suite. # App Hosting CLI Commands The Firebase CLI provides a comprehensive suite of commands to manage App Hosting resources. These commands are often faster and more scriptable than using the Firebase Console. ## Initialization ### `npx -y firebase-tools@latest init apphosting` - **Purpose**: Interactive command that sets up App Hosting in your local project. Use this command only if you are able to handle interactive CLI inputs well. Alternatively, you can manually edit `firebase.json` and `apphosting.yml`. - **Effect**: - Detects your web framework. - Creates/updates `apphosting.yaml`. - Can optionally create a backend if one doesn't exist. ## Backend Management ### `npx -y firebase-tools@latest apphosting:backends:list` - **Purpose**: Lists all backends in the current project. ### `npx -y firebase-tools@latest apphosting:backends:get <backend-id>` - **Purpose**: Shows details for a specific backend. ### `npx -y firebase-tools@latest apphosting:backends:delete <backend-id>` - **Purpose**: Deletes a backend and its associated resources. ### `npx -y firebase-tools@latest apphosting:rollouts:list <backend-id>` - **Purpose**: Lists the history of rollouts for a backend. ## Secrets Management App Hosting uses Cloud Secret Manager to securely handle sensitive environment variables (like API keys). ### `npx -y firebase-tools@latest apphosting:secrets:set <secret-name>` - **Purpose**: Creates or updates a secret in Cloud Secret Manager and makes it available to App Hosting. - **Behavior**: Prompts for the secret value (hidden input). ### `npx -y firebase-tools@latest apphosting:secrets:grantaccess