Hosting Multiple Sites on a Single Firebase Project

Firebase, an app development platform, backed by Google, that helps developers rapidly build mobile and web apps that scale.

When it comes to hosting your web applications, Firebase Hosting can host static websites and dynamic sites built with React, Vue or any Single Page Application (SPA) with a single command, firebase deploy --only hosting.

This works great for many use-cases however, you may run into a situation where you’d want to host multiple websites on the same firebase project, for example, say you want your website to support multiple languages such as French and German but still want to share the same Firestore Database and maybe you also enabled Firebase analytics and you want data for all three sites aggregated on a single dashboard, Using separate projects won’t cut it… In comes our subject matter, Hosting Multiple Sites on a Single Firebase Project.

Prerequisites

To be able to follow along with this article, you’d need the following;

• A Google Account
• A basic knowledge of HTML
• Know your way around a terminal
• Get a beverage, Tea or Coffee ☕

Create a Firebase Project

Head on to the Firebase Console and create a new project

Give the new project a descriptive name

And follow the remaining prompts.

Enable Firebase Hosting

For this to work, you would have to enable hosting on the firebase project. Select Hosting from the side and click on Get Started

Install the Firebase CLI

If you do not already have the Firebase CLI installed, install it by running,

npm install -g firebase-tools

Initialize Your Project

Before you initialize your project, you need to sign in to firebase. Run

firebase login

to start the sign-in process. This command opens a tab in your default browser, so you can log in…

PS: Login to the same Google account we used to create the Project in Step 1

Initialize your firebase project with the command:

firebase init

and follow the prompts

Deploy Your Project

Now we deploy the first site. Simply run

firebase deploy --only hosting

Congrats 🥳!!! You have successfully deployed your first site.

Setup Second Site

For our second site, we’d need to setup the site first on the firebase console…

Head on to the Hosting section, scroll down to the bottom and click on Add another site

Enter a unique name for your project then select Add site.

PS: you will need this unique name in the next step.

Setup Second Project Locally

Open the second project on your computer… This project can be as simple as only containing a single html file.

Run the following command to connect your project to the firebase project

firebase init

Follow the prompts,selecting the same project as you did in the earlier steps.

Next, run the following to connect the second site from the firebase console to the local project

firebase target:apply hosting <alias> <unique_name>

Where:

• alias can be any user-friendly name to represent the project
• unique_name is the same as in the Previous Step above.

Deploy Second Site

Finally, to deploy to the second site, Run;

firebase deploy --only hosting:<alias>

aliasis the same as the previous step

Voila 🎉

To host more sites, simply follow the steps to Add Second Site again

Thank You 🥳.

Suggestions and Corrections are very welcome, Please comment below