With an existing Next.js or Angular app (Next.js versions 13.5.x+or Angular 18.2.x+)in a GitHub repository, getting started withApp Hosting can be asstraightforward as creating anApp Hosting backend and then starting arollout with a push to your live branch. If you don't have an app, use one ofour sample apps to walk through the steps described in this guide.

This guide describes how to set upApp Hosting in theFirebase console toautomatically deploy every time a new commit is made to a GitHub repository. Atthe end of this flow you'll have a live Next.js or Angular example app that isredeployed every time you commit a new change to your GitHub repository'smain branch.

Though this guide focuses on the recommendedFirebase console flow, there areother ways todeploy,including using theFirebase CLI to deploy local code without a GitHubconnection.

Step 1: Fork the demo repository

Visithttps://github.com/FirebaseExtended/firebase-framework-tools and selectFork.

Step 2: Create anApp Hosting backend

In theFirebase console, openApp Hostingand selectGet started. You'll need to upgrade to the Blaze plan to use AppHosting.

Note: If you already have created at least one backend, selectCreate backend.

Follow the prompts to complete these steps:

• Choose a primary region (usually the region closest to your users).
• Connect to GitHub. Choose the repository you just created by forking thefirebase-framework-tools repository.
• Set your app's root directory to one of the following:
  • /starters/nextjs/basic
  • /starters/angular/basic
• Set the live branch asmain.
• Enable automatic rollouts(automatic rollouts are enabled by default).
• Assign a name to your backend.
• Create a new Firebase web app.

SelectFinish and deploy.

Step 3: View the deployed app

When you create a backend, Firebase gives you a no-cost subdomain where endusers can visit your web app. Its format isbackend-id--project-id.us-central1.hosted.app.

In theBackend information row in the dashboard for your backend, selectthe link to your live backend to view your new website:

1. In your fork of the demo GitHub repository, navigate to the source of thedemo app home page, make any recognizable edit you like, and then push yourchange to the main branch. To find your home page:

   • Next.js:/starters/nextjs/basic/src/app/page.tsx
   • Angular:/starters/angular/basic/src/app/pages/home/home.component.html

2. In theFirebase console, monitorApp Hosting asyour new change is rolled out to production. When the rollout is complete,you can view your change in the app's home page.

Next steps

• Go deeper: walk through a Firebase codelab that integrates ahosted app with Firebase Authentication and Google AI features:Next.js |Angular
• Connect a custom domain.
• Configure your backend—set environmentvariables, store secret parameters, and more.
• Monitor rollouts, site usage, and logs.