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.

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.

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.

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.

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.