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.

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 name as your Firebase project.

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.

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

Deploy target settings 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 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"
          "target": "app", // "app" is the applied target-name for the Hosting site myapp-app
          "public": "app/dist",
          "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

Gửi phản hồi về...

Bạn cần trợ giúp? Truy cập trang hỗ trợ của chúng tôi.