Published in


Multiple Hosting on Firebase with CircleCI

Credits: pexels.com

I got headache and all kinds of pain while following Google’s documentation about Firebase.
We had a requirement of deploying our static website pages anywhere but get it served over HTTPS. And like every smart developer 😝 I started searching for easiest way. We came across Firebase which automatically serves the websites over HTTPS. The joy was heavenly but… It didn’t last long. We followed their doc and we were stuck in the midway.
One thing I missed saying: we had multiple web-apps in the same codebase which added to our grief.

But I am a smart developer 😛
I started applying a hell lot of combinations in the firebase.json file but got no luck. Even when it worked from our local system, the circleCI was not able to do the same. But I am a Smart Developer 😫, I will try few more combinations and finally I got success.

Spoon-feeding starts here..🎃
1. We create an account on firebase or just login using our google account.
2. We can create as many projects we want. Give some meaningfull name as the project’s name in smallcase is going to be your projectID.
If we set project name as SomeWebApp the projectID will be assigned somewebapp automatically.
3. Install firebase tools in our local system to check if they are working.

//installing firebase-tools globally
npm install -g firebase-tools
//then go to project dir
firebase login
//initiate it for you project
firebase init

4. After running the last command we have to select our firebase project that we are going to associate with our local project. It will ask for some default setup, just press Yes for all as we will be making changes manually.

5. Now in our project we will be having a firebase.json file. Open it up.


The above configuration is specially for multiple hosting(or when the same codebase will be shared between different environments like staging and production). dist1 is the directory where our build for the first app is saved and dist2 is for the second one.

6. Previously we had added only one firebase project to our local. Now its time to add all the projects. In the above case we have two apps in local, so we will be adding two firebase projects to our local. In our firebase account, we have two projects, viz. projectone and projecttwo.

//make sure you have two projects in your firebase account
firebase use --add

We will be selecting projectone first. Then it will ask for alias name, skip that.

//then link the projectone of firebase to appone of local.
firebase target:apply hosting appone projectone
//now deploy appone
firebase deploy --only hosting:appone

That’s it, your first app is deployed. Its build was fetched from the target_name that we gave on the above command because we have mapped the target_names with repective build directories in the firebase.json file.

7. Do the same for the second app also.

//add the second firebase project to local
//slect the project and skip adding alias
firebase use --add
//link the target with project
firebase target:apply hosting apptwo projecttwo
//deploy it
firebase deploy --only hosting:apptwo

That is it!!
Following these we can easily deploy multiple projects from you local. But there is some thing we have to do everytime. We have to run firebase use project_name everytime before deploying to a specific project.
So -P option comes to our rescue now. We have change just a bit in our last deployment command.

// for projectone
firebase deploy -P projectone --only hosting:appone
// for projecttwo
firebase deploy -P projectwo --only hosting:apptwo

Adding these to CircleCI 😿 😢
Adding the above steps to circleCI pipeline might seem tedious but actually, its a dead simple task. We don’t need to add all the above steps to the CI pipe but only the deployment command. You might be thinking, how the ***k it will set the projects and all.
Lets rewind… Go to your project directory in local. You will find a .firebaserc file with some magical json schema. This is the file which you have to push with your codebase to you repo and it will do all the jobs for you because the firebase-cli reads project related information from this file.

Spoon-feeding continues..
. In our terminal, we type

firebase login:ci// after successfull login, it will give us our firebase_token.
// copy it from terminal and add it to our circleCI's environment
// variable

2. Our config.yml for circleCI:

CircleCI config.yml

And finally as we are 💁 SMART DEVELOPERS, we can just ctrl+c/ctr+v all the above sinppets and it will work fine.

Thanks if you have come all the way down. 😄 😅



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store