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 with App Hosting can be as
straightforward as creating an App Hosting backend and then starting a
rollout with a push to your live branch. If you don't have an app, use one of
our sample apps to walk through the steps described in this guide.

### AI prompt for AI assistance


***For AI assistance, copy the prompt below into your
AI coding agent (like Antigravity, Claude Code, Codex, and Cursor).**
You can customize the prompt and iterate with your agent. Visit
[Firebase agent skills](https://firebase.google.com/docs/ai-assistance/agent-skills.md.txt)
for detailed installation info.*

```
Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.
```

This guide describes how to set up App Hosting in the Firebase console to
automatically deploy every time a new commit is made to a GitHub repository. At
the end of this flow you'll have a live Next.js or Angular example app that is
redeployed every time you commit a new change to your GitHub repository's
`main` branch.

Though this guide focuses on the recommended Firebase console flow, there are
[other ways to
deploy](https://firebase.google.com/docs/app-hosting/alt-deploy),
including using the Firebase CLI to deploy local code without a GitHub
connection.

## Step 1: Fork the demo repository

If you already have a Next.js or Angular application in a GitHub repository, you
can skip this step and proceed to
[Step 2: Create an App Hosting backend](https://firebase.google.com/docs/app-hosting/get-started.md.txt#create-app-hosting-backend). You
don't need to fork or install the `apphosting-adapters` repository to deploy
your own app.

If you don't have an existing application and want to deploy a sample app, visit
<https://github.com/firebase/apphosting-adapters>
and select **Fork** . In addition to framework adapter tooling, this repository
includes the official Next.js and Angular starter templates in the
[`/starters`](https://github.com/firebase/apphosting-adapters/tree/main/starters)
directory.

## Step 2: Create an App Hosting backend

1. In the Firebase console, navigate to **Hosting \& Serverless** \>
   [**App Hosting**](https://console.firebase.google.com/project/_/apphosting/).

2. Click **Get started**.

3. If prompted, upgrade to the [pay-as-you-go Blaze pricing plan](https://firebase.google.com/pricing.md.txt) to use App Hosting.

> [!NOTE]
> **Note:** If you've already created at least one backend, select **Create backend**.

<br />

![A screenshot of App Hosting backend setup.](https://firebase.google.com/static/docs/app-hosting/images/backend-console.png)

<br />

Follow the prompts to complete these steps:

- Choose a primary region (usually the region closest to your users).

- Connect to GitHub. Choose the repository that you created by forking the
  `apphosting-adapters` repository, or choose your existing application repository.

- Set your app's root directory:

  - If you deploy your own application, specify the root directory of your app
    (defaults to `/`). This directory is usually where your `package.json` file
    is located.

  - If you use the `apphosting-adapters` demo repository, set your app's root
    directory to one of the following paths:

  - [**/starters/nextjs/basic**](https://github.com/firebase/apphosting-adapters/tree/main/starters/nextjs/basic)

  - [**/starters/angular/basic**](https://github.com/firebase/apphosting-adapters/tree/main/starters/angular/basic)

- Set the live branch as **main**.

- Enable automatic rollouts
  (automatic rollouts are enabled by default).

- Assign a name to your backend.

- Select your runtime environment. By default, the newest recommended Node.js
  version is pre-selected for you.

  - Configure [Automatic Base Image Updates
    (ABIU)](https://firebase.google.com/docs/app-hosting/frameworks-tooling#abiu). ABIU is enabled by default and automatically applies security patches to your underlying environment. You can opt out of ABIU by selecting "Not specified" for your runtime.
- Create a new Firebase web app.

Select **Finish and deploy**.

## Step 3: View the deployed app

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

In the **Backend information** row in the dashboard for your backend, select
the link to your live backend to view your new website:

<br />

![A screenshot of the backend information row with the live app link
emphasized.](https://firebase.google.com/static/docs/app-hosting/images/live-link.png)

<br />

> [!NOTE]
> **Note:** After creating your backend, it may take around five minutes for your app's URL to work.

## Step 4: Trigger a rollout by pushing a change

Once your backend is created and you have a live URL, you can
trigger the rollout of a new version of your web app whenever you push
changes into the live branch of your GitHub repository. To perform a
test of your App Hosting setup:

1. In your fork of the demo GitHub repository, navigate to the source of the
   demo app home page, make any recognizable edit you like, and then push your
   change 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 the Firebase console, monitor
   [App Hosting](https://console.firebase.google.com/project/_/apphosting) as
   your 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 a
  hosted app with Firebase Authentication and Gemini API features:
  [Next.js](https://firebase.google.com/codelabs/firebase-nextjs) \|
  [Angular](https://firebase.google.com/codelabs/firebase-web)

- [Connect a custom domain](https://firebase.google.com/docs/app-hosting/custom-domain.md.txt).

- [Configure your backend](https://firebase.google.com/docs/app-hosting/configure.md.txt)---set environment
  variables, store secret parameters, and more.

- [Monitor rollouts, site usage, and logs](https://firebase.google.com/docs/app-hosting/rollouts.md.txt).