Wait, what..is that even possible... Cause one project in firebase means only one hosting for that particular project, Right..!
Well, my fellow reader, Firebase has this feature to deploy multiple sites in a single firebase hosting. You might be wondering why do we need multiple websites for a single project, yeah I thought that too, so apparently, there might be situations, in which the user might need 2 separate apps i.e. one for customers, one for admin employees - both of which share the same database and functions.
In this blog, let me walk through the steps which you will need to follow strictly to deploy the sites correctly to their respective domains.
NOTE: I ASSUME THAT YOU HAVE ALREADY DEPLOYED ONE OF YOUR APPS TO YOUR FIREBASE PROJECT, OTHERWISE, YOU WON'T BE ABLE TO DEPLOY MULTIPLE SITES
Great, I hope you are still with me, Lets Begin.
1 Define Your Site Name(s)
Assume, there is an e-commerce vendor, whose consumer app is done and deployed on firebase, now you are working on the admin site for the vendor which will help the user to add products to his e-commerce website.
- In the Firebase Hosting Console, scroll to the bottom under the Advanced Section you will find an option to Add Another Site , When you click that, you will see the below screen.
- Add the site name for ex: admin-multi-site-magic , then you will see the site will be added like this.
Wait, it's not over yet, you have just added the site, you have not deployed anything to your new site, lets see how that's done
You need Firebase Tools v4.2 or later for multisite hosting.
npm i -g firebase-tools@latest
firebase -v
firebase init hosting
One thing to note here, to make sure you add the word hosting in the last command since firebase has a lot of functions so when you add hosting after init, it will understand that it needs to only initialize the hosting.
It will prompt you some questions to select the project where you want to host it, make sure to select the correct project.
3 Update the firebase.json
As soon as you complete the above step, you will see that firebase adds 2 files to your project directory i.e. .firebaserc firebase.json
Now we just need to update this firebase.json by adding a field called target. Firebase uses this target, (yes you guessed it probably) to target the site to which your code needs to be deployed.
If you are using React, your deployable code will be your build folder
and If you are using Angular, your deployable code will be your dist folder.
The name of the target can be anything, but better to keep it relevant to the site you are about to deploy. Add your target file as shown below, just above the public field
{
"hosting": {
"target": "admin",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
4 Letting firebase know about the new target you just created.
We need to associate the sites with a local target so Firebase knows which code to deploy where. We run the following command for each site:
firebase target:apply hosting <target-name> <resource-name>
firebase target:apply hosting admin admin-multi-site-magic
where the target-name is just a unique name you choose, and resource-name is the site from step 1.
5 Deploy to FIrebase
We have done all the major steps, now we can deploy it to firebase to the targeted site.
firebase deploy
And that's it, I hope you liked it if you do leave some reactions and comments. Also, I am open to collaboration you can mail me or ping me on any of the social media platforms.
