Share project resources across multiple sites

You can set up one or more Firebase Hosting sites in a single Firebase project. Since the sites are all in the same Firebase project, all the sites can access the other Firebase resources of the project.

• Each site has its own hosting configuration.
• Each site hosts its own collection of content.
• Each site can have one or more associated domains.

By setting up multiple Hosting sites within the same Firebase project, you can more easily share Firebase resources between related sites and apps. For example, if you set up your blog, admin panel, and public app as individual sites in the same Firebase project, they can all share the same Firebase Authentication user database, while also having their own unique domains or content.

Important: To mirror your workflow environments (for example, Dev, Q1, Q2, Prod), we recommend that you create a separate Firebase project for each environment rather than creating multiple sites in a single Firebase project. Generally, you don't want to use production-environment Firebase resources (like customer data in a Realtime Database) in a development environment. Consider using automatic SDK configuration to mirror multiple environments using a single codebase.

The multisite feature supports a maximum of 36 sites per Firebase project.

Step 1: Update your Firebase CLI version

Make sure that you have the most current Firebase Hosting features. Update to the latest Firebase CLI version by running the following command from your terminal:

npm install -g firebase-tools

Step 2: Add additional sites

Add additional sites to a Firebase project directly from your Firebase Hosting page. To each site, you can also optionally add custom domains to serve the same content and configuration to multiple URLs.

Note: If you created multiple Firebase Realtime Database instances in your Firebase project before August 2018, Firebase automatically provisioned a corresponding site for each database instance. If you don't need these additional sites, you can delete them without affecting your database instances.

Delete a secondary site

Delete unwanted sites directly from your Firebase Hosting page. Note that you cannot delete the default site, which has the same site name as your Firebase project ID.

Caution: Deleting a site is a permanent action. If you delete a site, Firebase doesn't maintain records of deployed files or deployment history, and the site name cannot be reactivated by you or anyone else.

Step 3: Set up deploy targets for your sites

When you have multiple sites and you run Firebase CLI deploy commands, the CLI needs a way to communicate which settings should be deployed to each site. With deploy targets you can uniquely identify a specific site by its target name in your firebase.json configuration file and in your Firebase CLI commands for testing or deploying to your sites.

Important: Using deploy targets is the recommended way to configure deploys for multiple Hosting sites.
If you previously configured your firebase.json file by explicitly referencing your site-name, you should edit yourfirebase.json configuration and your CLI commands to use deploy targets instead.

To create a deploy target and apply a target name to a Hosting site, run the following CLI command from the root of your project directory:

firebase target:apply hosting target-name resource-name

Where the parameters are:

• target-name — a unique identifier (that you've defined yourself) for the Hosting site that you're deploying to
• resource-name — the name of the Hosting site as listed in your Firebase project

For example, if you've created two sites (myapp-blog and myapp-app) in your Firebase project, you could apply a unique target name to each site (blog and app, respectively) by running the following commands:

firebase target:apply hosting blog myapp-blog

firebase target:apply hosting app myapp-app

The settings for deploy targets are stored in the .firebaserc file in your project directory, so you only need to set up deploy targets one time per project.

Step 4: Define the hosting configuration for each site

Use a site's applied target name when you're defining its hosting configuration in your firebase.json file.

• If your firebase.json file defines the configuration for multiple sites, use an array format:

  {
    "hosting": [ {
        "target": "blog",  // "blog" is the applied target name for the Hosting site "myapp-blog"
        "public": "blog/dist",  // contents of this folder are deployed to the site "myapp-blog"
  
        // ...
      },
      {
        "target": "app",  // "app" is the applied target name for the Hosting site "myapp-app"
        "public": "app/dist",  // contents of this folder are deployed to the site "myapp-app"
  
        // ...
  
        "rewrites": [...]  // You can define specific Hosting configurations for each site
      }
    ]
  }
  
• If your firebase.json file defines the configuration for only one site, it's not necessary to use an array format:

  {
    "hosting": {
        "target": "blog",
        "public": "dist",
  
        // ...
  
        "rewrites": [...]
    }
  }
  

Step 5: Deploy to your sites or serve locally

Run any of the following commands from the root of your project directory.

Command	Description
firebase deploy	Creates a release of all deployable resources in your project directory
firebase deploy --only hosting:target-name	Creates a release of only the resources for the specified Hosting target
firebase serve	Serves your Firebase project locally
firebase serve --only hosting:target-name	Serves locally only the resources for the specified Hosting target

Was this page helpful?