Get started with App Hosting

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.

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:

New to Firebase or Cloud

Follow these steps if you're new to Firebase or Google Cloud.
You can also follow these steps if you want to create a wholly new Firebase project (and its underlying Google Cloud project).

  1. Sign into the Firebase console.
  2. Click the button to create a new Firebase project.

  3. In the text field, enter a project name.

    If you're part of a Google Cloud org, you can optionally select which folder you create your project in.

  4. If prompted, review and accept the Firebase terms, then click Continue.
  5. (Optional) Enable AI assistance in the Firebase console (called "Gemini in Firebase"), which can help you get started and streamline your development process.

  6. (Optional) Set up Google Analytics for your project, which enables an optimal experience using these Firebase products: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging, and Remote Config (including Personalization).

    Either select an existing Google Analytics account or 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.

  7. Click Create project.

Firebase creates your project, provisions some initial resources, and enables important APIs. When the process completes, you'll be taken to the overview page for your Firebase project in the Firebase console.

Existing Cloud project

Follow these steps if you want to start using Firebase with an existing Google Cloud project. Learn more about "adding Firebase" to an existing Google Cloud project.

  1. Sign into the Firebase console with the account that gives you access to the existing Google Cloud project.
  2. Click the button to create a new Firebase project.
  3. At the bottom of the page, click Add Firebase to Google Cloud project.
  4. In the text field, start entering the project name of the existing project, and then select the project from the displayed list.
  5. Click Open project.
  6. If prompted, review and accept the Firebase terms, then click Continue.
  7. (Optional) Enable AI assistance in the Firebase console (called "Gemini in Firebase"), which can help you get started and streamline your development process.

  8. (Optional) Set up Google Analytics for your project, which enables an optimal experience using these Firebase products: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging, and Remote Config (including Personalization).

    Either select an existing Google Analytics account or 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.

  9. Click Add Firebase.

Firebase adds Firebase to your existing 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.

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 as an argument:

firebase apphosting:backends:create --project PROJECT_ID

For both console or CLI, follow the prompts to choose a region, 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.

  • Assign a name to your backend.

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}

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