Hosting multiple sites in Firebase

4 min readSep 7, 2021

Firebase hosting supports multiple sites on a single Firebase project. There are many use cases for this awesome feature. For example, you can deploy a staging build of your website to test it first before deploying it to production. You can also host both your customer and admin websites on a single Firebase project.

Install Get Started React App

Please set up the Get Started React app by running this command on your CLI. Ensure that you have installed Node.js before running the following command on your CLI.

npx create-react-app <YOUR-APP-NAME>

Install Firebase CLI

Install Firebase CLI to your machine if you have not done so.

npm install -g firebase-tools

firebase login

Setting up Firebase

Run this following command on your CLI on the root directory of the Get Started React App to add Firebase hosting configurations to the project.

firebase init hosting

These are the inputs that I have given to firebase. You can select different options if you are not using the Get Started React App.

There should be 2 new files created on the root directory of your project (.firebaserc and firebase.json).

Deploy to Firebase hosting

Next, we will run the following command on our CLI to add a target name to a hosting resource on Firebase.

# target-name e.g. (staging, production)
firebase target:apply hosting <target-name> <resource-name>

You can specify anything for the target name. A target name is like an alias to the resource name. Firebase will be deploying the website to the resource name that you have to specify. The first resource name has to be your Firebase project-id. You can find that name in the .firebaserc file that was generated (the value of the default key) by Firebase CLI.

This is the command that I had run on my CLI.

# lzz-personalblog is my firebase project-id
firebase target:apply hosting prod lzz-personalblog

Open up your firebase.json file and add "target": "<YOUR-TARGET-NAME>" under the hosting JSON object. Your firebase.json file should look something like the file below after adding it.

https://gist.github.com/preethamslab/546107fd31df9130b3227589fc1b5256

firebase.json

Run this command on your CLI to create a production build of the React App project.

yarn build

And this command to deploy the website to your Firebase hosting.

firebase deploy --only hosting:<YOUR-TARGET-NAME>

This is the command that I had run.

firebase deploy --only hosting:prod

Open up your project’s Firebase console. Go to Hosting page and you should see your website being deployed to Firebase hosting.

Deploying another site

To deploy another site to Firebase hosting, scroll to the bottom of the Firebase hosting page in your Firebase console. You should see a section that allows you to add another site. Click on that and give it a unique subdomain name. That unique subdomain name will be your another resource name in that Firebase project.

You should see a new Firebase hosting site created for you.

Go back to your project root directory, open up your CLI and run the following command again. Remember to give a different target name this time.

# target-name e.g. (staging, production)
firebase target:apply hosting <target-name> <resource-name>

This is the command that I had run.

firebase target:apply hosting staging staging-lzz-personalblog

You should see two different targets in your .firebaserc file now. Open up your firebase.json file and convert the hosting JSON object to an array. Remember to update the target key value to ensure that it matches the two target name that you have specified earlier.

This is how my firebase.json file looks like now.

https://gist.github.com/preethamslab/546107fd31df9130b3227589fc1b5256