skill
Firebase App Hosting Basics
Deploys and manages full-stack web applications (Next.js, Angular) with Server-Side Rendering (SSR) using Firebase App Hosting. Use when deploying Next.js/Angular apps, configuring apphosting.yaml or firebase.json apphosting blocks, managing secrets, setting up GitHub CI/CD, or configuring Blaze billing requirements. Don't use for classic static web hosting, Auth, Firestore, Crashlytics, or Xcode.
About
# 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" ] } } ``` 1. Create or edit `apphosting.yaml`- see [Configuration](references/configuration.md) for more information on how to do so. 1. 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. 1. 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.
Install
Run this command
npx skills add firebase/agent-skillsWorks with
Manual steps
Install with `npx skills add firebase/agent-skills`, or clone the repository and copy the `skills/firebase-app-hosting-basics` folder into your Claude skills directory.
Related assets
More curated picks in Productivity & Office.
npm install @modelcontextprotocol/server-time
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/operations/skills/change-request ~/.claude/skills/
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/product-management/skills/product-brainstorming ~/.claude/skills/
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/operations/skills/compliance-tracking ~/.claude/skills/
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/operations/skills/process-optimization ~/.claude/skills/
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/enterprise-search/skills/search-strategy ~/.claude/skills/
Audit before you install
Run any source through our checks - AI visibility, security, performance, and stack detection.
Automated Web Security Scan
security
PageSpeed Analyzer
performance
AI Content Quality Test
arabic content
AI Agent / MCP Server Tester
ai testing
Site Stack Detector
migration
AI SEO / AEO / GEO Audit
ai visibility
llms.txt Generator
ai visibility
Readability Score
arabic content
Schema / JSON-LD Builder
ai visibility
AI Cost Calculator
ai testing
Headline Analyzer
arabic content