firebase-app-hosting-basics
firebase/agent-skills
Deploy full-stack Next.js and Angular apps with Firebase App Hosting.
What is firebase-app-hosting-basics?
Firebase App Hosting enables deployment and management of modern full-stack web applications like Next.js and Angular with server-side rendering support. Use this skill when you need automated deployments with zero configuration for apps requiring backends or SSR.
- Deploy Next.js, Angular, and other full-stack frameworks with built-in SSR/ISR support
- Configure deployments via firebase.json and apphosting.yaml
- Manage sensitive credentials using Firebase secrets management
- Deploy via CLI with npx firebase-tools@latest deploy
- Set up automated GitHub CI/CD for git-push-to-deploy workflows
- Test apps locally using 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- Firebase project on Blaze pricing plan (metered billing)
- firebase-tools CLI installed
- Supported framework: Next.js, Angular, or similar full-stack framework
- apphosting.yaml configuration file
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.Configure firebase.json with an apphosting block specifying backendId, rootDir, and ignore patterns
- 3.Create or edit apphosting.yaml with your deployment configuration
- 4.If needed, set secrets using npx -y firebase-tools@latest apphosting:secrets
- 5.Run npx -y firebase-tools@latest deploy to deploy your application
- 6.Optionally configure GitHub integration for automated deployments on git push
Use cases
- Deploying a Next.js application with server-side rendering to production
- Setting up automated deployments when pushing code to a GitHub repository
- Managing API secrets and environment variables for a full-stack Angular app
- Testing a full-stack application locally before deploying to App Hosting
- Migrating from Firebase Hosting to App Hosting for SSR requirements
- Full-stack developers using Next.js or Angular
- Teams wanting automated git-push deployments
- Developers needing server-side rendering or incremental static regeneration
- Projects requiring backend integration with frontend frameworks
firebase-app-hosting-basics FAQ
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, or backend integration.
Yes, your Firebase project must be on the Blaze pricing plan (metered billing) to use App Hosting.
Yes, you can configure a backend connected to a GitHub repository for automated git-push deployments, though this is recommended for advanced users.
Use npx -y firebase-tools@latest apphosting:secrets commands to set and grant access to secrets for your app.
Yes, use the Firebase Local Emulator Suite for local testing before deploying to App Hosting.
Full instructions (SKILL.md)
Source of truth, from firebase/agent-skills.
name: firebase-app-hosting-basics description: Deploy and manage web apps with Firebase App Hosting. Use this skill when deploying Next.js/Angular apps with backends.
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.jsonwith anapphostingblock.{ "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:secretscommands to set and grant access to secrets. - Run
npx -y firebase-tools@latest deploywhen 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.
Emulation
See Emulation for more information on how to test your app locally using the Firebase Local Emulator Suite.
Related skills
More from firebase/agent-skills and the wider catalog.
firebase-basics
Firebase CLI setup, authentication, and project management for agent workflows
firebase-auth-basics
Set up Firebase Authentication for user sign-in, management, and secure data access.
firebase-hosting-basics
Deploy static web apps, SPAs, and microservices to Firebase Hosting with a single command.
firebase-data-connect
Build and deploy PostgreSQL-backed Firebase backends with GraphQL, auto-generated queries, and type-safe SDKs.
developing-genkit-js
Develop AI-powered applications using Genkit in Node.js/TypeScript with flows, tools, and multi-provider support.
developing-genkit-dart
Generates code and documentation for building AI agents in Dart using the Genkit SDK.