firebase-app-hosting-basics

firebase/agent-skills

Deploy full-stack Next.js and Angular apps with Server-Side Rendering on Firebase App Hosting.

What is firebase-app-hosting-basics?

Firebase App Hosting enables deployment and management of modern full-stack web applications (Next.js, Angular) with Server-Side Rendering. Use this skill when deploying SSR-enabled apps, configuring apphosting.yaml or firebase.json, managing secrets, or setting up GitHub CI/CD workflows. Requires a Blaze billing plan.

Deploy Next.js and Angular applications with Server-Side Rendering (SSR) and Incremental Static Regeneration (ISR)
Configure firebase.json apphosting blocks and apphosting.yaml for automated deployments
Manage sensitive keys and environment variables using Firebase App Hosting secrets
Set up automated "git push to deploy" CI/CD workflows via GitHub
Test applications locally using the Firebase Local Emulator Suite

How to install firebase-app-hosting-basics

npx skills add https://github.com/firebase/agent-skills --skill firebase-app-hosting-basics

Prerequisites

Firebase project on Blaze pricing plan (metered billing)
Next.js or Angular application ready for deployment
GitHub repository (for CI/CD setup; optional for manual deployments)
Firebase CLI installed (npx firebase-tools)

Claude Code

Cursor

Windsurf

Cline

How to use firebase-app-hosting-basics

1.Upgrade your Firebase project to Blaze plan at https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered
2.Add an apphosting block to firebase.json with your backendId and rootDir configuration
3.Create or edit apphosting.yaml to define your app's build and runtime configuration
4.If needed, set secrets using npx firebase-tools apphosting:secrets commands to securely store sensitive keys
5.Run npx firebase-tools deploy to deploy your application, or connect your GitHub repository for automated deployments

Use cases

Good for

Deploying a Next.js application with SSR to production with zero-configuration git-based workflow
Configuring environment secrets for a full-stack Angular app without exposing credentials
Setting up automated GitHub CI/CD to deploy on every push to a repository
Migrating from static Firebase Hosting to App Hosting for a dynamic full-stack application
Testing a full-stack app locally before deploying to Firebase App Hosting

Who it's for

Full-stack developers building Next.js or Angular applications
Teams using GitHub for version control and seeking automated deployments
Developers needing Server-Side Rendering or dynamic content generation
Projects requiring secure management of API keys and environment secrets

firebase-app-hosting-basics FAQ

What's the difference between Firebase Hosting and App Hosting?

Firebase Hosting is for static sites and simple SPAs without SSR. App Hosting is for full-stack frameworks like Next.js and Angular that need Server-Side Rendering, ISR, and automated git-based deployments.

Do I need to use GitHub for App Hosting?

No. You can deploy manually using npx firebase-tools deploy. GitHub CI/CD integration is optional and recommended for advanced users seeking automated deployments.

What pricing plan do I need?

App Hosting requires a Firebase Blaze (metered) pricing plan. Upgrade at https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered.

How do I securely manage API keys and secrets?

Use npx firebase-tools apphosting:secrets commands to set and grant access to secrets without exposing them in your codebase.

Can I test my app locally before deploying?

Yes. Use the Firebase Local Emulator Suite to test your full-stack app locally before deploying to App Hosting.

Full instructions (SKILL.md)

Source of truth, from firebase/agent-skills.

name: firebase-app-hosting-basics description: >- 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. metadata: category: Serverless

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.

Configure firebase.json with an apphosting block.

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

Create or edit apphosting.yaml- see Configuration for more information on how to do so.
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.
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 for more information on how to set this up using CLI commands.