PluginBench
Skill
Official
Review
Audit score 70

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
Prerequisites
  • 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
Claude Code
Cursor
Windsurf
Cline

How to use firebase-app-hosting-basics

  1. 1.Upgrade your Firebase project to Blaze plan at https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered
  2. 2.Configure firebase.json with an apphosting block specifying backendId, rootDir, and ignore patterns
  3. 3.Create or edit apphosting.yaml with your deployment configuration
  4. 4.If needed, set secrets using npx -y firebase-tools@latest apphosting:secrets
  5. 5.Run npx -y firebase-tools@latest deploy to deploy your application
  6. 6.Optionally configure GitHub integration for automated deployments on git push

Use cases

Good for
  • 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
Who it's for
  • 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

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, or backend integration.

Do I need to be on a specific pricing plan?

Yes, your Firebase project must be on the Blaze pricing plan (metered billing) to use App Hosting.

Can I set up automated deployments from GitHub?

Yes, you can configure a backend connected to a GitHub repository for automated git-push deployments, though this is recommended for advanced users.

How do I manage sensitive credentials in App Hosting?

Use npx -y firebase-tools@latest apphosting:secrets commands to set and grant access to secrets for your app.

Can I test my app locally before deploying?

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.

  1. Configure firebase.json with an apphosting block.
    {
      "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 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 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.