Firebase: one project with two different websites on different URLs.

Requieres:

npm i firebase

And assumes that you have two separate projects to deploy and a first all ready deployed.

First, log into the project on the firebase web console where you already have one site deployed and go to “hosting” and click “add site”

Lets say your site name will be aSite1.firebaseapp.com

Then inside your project folder do:

firebase init

Select the hosting option and proceed.

This command will create, among others, a file called firebase.json which you will have to edit. Open it and change this:

firebase.json generated by firebase init

to this:

Add the first line: “target”: “someName”,

Basically, you added the first line inside the “hosting” object: "target":"someName"

Then, add your firebase web credentials to the desired environment. For the sake of simplicity both environments ( environments.prod.ts && environments.ts) will hold the same project credentials. (Changing this only will matter when you decide to actually have a different environments), so it is okey for this tutorial to use the same credentials for both files.

The web credentials are found on the console, usually under this icon:

Web api credentials location

and they look like this:

Then go inside your project folder in the console and do

firebase target:apply hosting someName aSite1

There are only two variables in this command that you must adjust according to your setting:someName comes from the line you added to the firebase.json file and aSite1 is the site name you selected on the firebase console.

Finally, do:

firebase deploy --only hosting:someName

and you will have two sites, or web-apps sharing the same resources, and that is great!

Hosting section of a firebase project with two sites hosted.

You can repeat this process as many times as sites you want to host inside a project.