Test your web app locally, share changes with others, then deploy live

Before deploying to your live site, you'll want to view and test your changes. Firebase Hosting enables you to view and test changes locally and interact with emulated backend project resources. If you need your teammates to view and test your changes, Hosting can create sharable, temporary preview URLs for your site. We even support a GitHub integration to deploy from a pull request.

Before you begin

Complete the steps listed on the Hosting Get Started page, specifically the following tasks:

  1. Install or update the Firebase CLI to its latest version.
  2. Connect the local project directory (containing your app's content) to your Firebase project.

You can optionally deploy your app's Hosting content and config, but it's not a prerequisite for the steps on this page.

Step 1: Test locally

If you're making quick iterations or you want your app to interact with emulated backend project resources, you can test your Hosting content and config locally. When testing locally, Firebase serves your web app at a locally hosted URL.

Hosting is part of the Firebase Local Emulator Suite, which enables your app to interact with your emulated Hosting content and config, as well as optionally your emulated project resources (functions, databases, and rules).

  1. (Optional) By default, your locally hosted app will interact with real, not emulated, project resources (functions, database, rules, etc.). You can instead optionally connect your app to use any emulated project resources that you've configured. Learn more: Realtime Database | Cloud Firestore | Cloud Functions

  2. From the root of your local project directory, run the following command:

    firebase emulators:start

  3. Open your web app at the local URL returned by the CLI (usually http://localhost:5000).

  4. To update the local URL with changes, refresh your browser.

Test from other local devices

By default, the emulators only respond to requests from localhost. This means that you'll be able to access your hosted content from your computer's web browser but not from other devices on your network. If you'd like to test from other local devices, configure your firebase.json like so:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

Step 2: Preview and share

If you want others to view changes to your web app before going live, you can use preview channels.

After you deploy to a preview channel, Firebase serves your web app at a "preview URL", which is a sharable, temporary URL. When using a preview URL, your web app interacts with your real backend for all project resources (with the exception of any "pinned" functions in your rewrites config).

Note that although preview URLs are difficult to guess (as they contain a random hash), they are public. So, anyone who knows the URL can access it.

  1. From the root of your local project directory, run the following command:

    firebase hosting:channel:deploy CHANNEL_ID

    Replace CHANNEL_ID with a string with no spaces (for example, feature_mission-2-mars). This ID will be used to construct the preview URL associated with the preview channel.

  2. Open your web app at the preview URL returned by the CLI. It will look something like this: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. To update your preview URL with changes, run the same command again. Make sure to specify the same CHANNEL_ID in the command.

Learn about managing preview channels, including how to set a channel's expiration.

Firebase Hosting supports a GitHub Action that automatically creates and updates a preview URL when you commit changes to a pull request. Learn how to set up and use this GitHub Action.

Step 3: Deploy live

When you're ready to share your changes with the world, deploy your Hosting content and config to your live channel. Firebase offers a couple different options for this step depending on your use case (see options below).

Option 1: Clone from a preview channel to your live channel

This option provides confidence that you're deploying to your live channel the exact content and config that you tested in a preview channel. Learn more about cloning versions.

  1. From any directory, run the following command:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Replace each placeholder with the following:

    • SOURCE_SITE_ID and TARGET_SITE_ID: These are the IDs of the Hosting sites that contain the channels.

      • For your default Hosting site, use your Firebase project ID.
      • You can specify sites that are in the same Firebase project or even in different Firebase projects.

    • SOURCE_CHANNEL_ID: This is the identifier for the channel that is currently serving the version you want to deploy to your live channel.

      • For a live channel, use live as the channel ID.

  2. View your changes (next step).

Option 2: Deploy from your local project directory to your live channel

This option provides you flexibility to adjust configurations specific to the live channel or to deploy even if you haven't used a preview channel.

  1. From the root of your local project directory, run the following command:

    firebase deploy --only hosting

  2. View your changes (next step).

Step 4: View your changes on your live site

Both of the options above deploy your Hosting content and config to the following sites:

  • The Firebase-provisioned subdomains for your default Hosting site and any additional Hosting sites:
    SITE_ID.web.app (like PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (like PROJECT_ID.firebaseapp.com)

  • Any custom domains that you've connected to your Hosting site(s)

To restrict the deploy to a specific Hosting site, specify a deploy target in your CLI command.

Other deploy activities and information

Add a comment for the deploy

You can optionally add a comment to a deploy. This comment will display with the other deployment information on the Hosting dashboard in the Firebase console. For example:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Add predeploy and postdeploy scripted tasks

You can optionally connect shell scripts to the firebase deploy command to perform predeploy or postdeploy tasks. For example, a postdeploy hook could notify administrators of new site content deploys. Refer to the Firebase CLI documentation for more details.

Caching deployed content

When a request is made for static content, Firebase Hosting automatically caches the content on the CDN. If you redeploy your site's content, Firebase automatically clears all your cached static content across the CDN so that new requests receive your new content.

Note that you can configure the caching of dynamic content.

Serving over HTTPS

Make sure that all external resources that are not hosted on Firebase Hosting are loaded over SSL (HTTPS),including any external scripts. Most browsers do not allow users to load "mixed content" (SSL and non-SSL traffic).

Deleting files

In Firebase Hosting, the primary way to delete selected files from a deployed site is to delete the files locally, and then redeploy.

Next steps