Get started with App Hosting

With an existing Next.js or Angular app (Next.js versions 13+ or Angular 17.2+) 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.

Before you begin

Before you can set up Firebase App Hosting, you'll need to create a Firebase project (if you don't already have one) and upgrade to the Blaze plan.

To create a project:

  1. In the Firebase console, click Add project.

    • To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu.

    • To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name.

  2. If prompted, review and accept the Firebase terms.

  3. Click Continue.

  4. (Optional) Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:

    Either select an existing Google Analytics account or to create a new account.

    If you create a new account, select your Analytics reporting location, then accept the data sharing settings and Google Analytics terms for your project.

  5. Click Create project (or Add Firebase, if you're using an existing Google Cloud project).

Firebase automatically provisions resources for your Firebase project. When the process completes, you'll be taken to the overview page for your Firebase project in the Firebase console.

Step 0 (optional): Create a GitHub repository and Web app

If you don't already have a Web app residing in a GitHub repository, or if you'd rather try the flow with a sample app, start by initializing one of our samples, for either Next.js or Angular:

npm init @apphosting

You can run the sample app locally using next dev or ng start. To continue, create a new GitHub repository and push the newly-initialized sample code to it.

Step 1: Create an App Hosting backend

An App Hosting backend is the collection of managed resources that App Hosting creates to build and run your Web app. You can create and list App Hosting backends using the Firebase console or Firebase CLI.

Firebase console: From the Build menu, select App Hosting and then Get started.

CLI: (Version 13.15.4 or later) To create a backend, run the following command from the root of your local project directory, supplying your projectID and preferred region as arguments:

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

For both console or CLI, follow the prompts to assign a name to your backend, to set up a GitHub connection, and configure these basic deployment settings:

  • Set your app's root directory (defaults to /)

    This is usually where your package.json file is located.

  • Set the live branch

    This is the branch of your GitHub repository that gets deployed to your live URL. Often, it's the branch into which feature branches or development branches are merged.

  • Accept or decline automatic rollouts

    Automatic rollouts are enabled by default. At completion of backend creation, you can choose for your app to be deployed to App Hosting immediately.

Step 2: 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.

To view your Web app's URL, check the Firebase console, or run the following CLI command:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

Step 3: 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 GitHub, push a change to the live branch of the Web app.
  2. Open the App Hosting tab in the Firebase console and select View dashboard for your backend. The table list displays the specific commit associated with the rollout triggered by your change.

Next steps