How to set up your Firebase project to deploy in two different hosting destinations?

Context

At some point in the development of your project, you will have to control at least two environments: development and production. You would have to make deployments in each one separately or according to a standard flow (first deploy to dev and after the client approves it, deploy to prod).

So let's say you have two Firebase projects:

• FIND-YOUR-PRODUCT-DEV (project-id is find-your-product-dev)
• FIND-YOUR-PRODUCT-PROD (project-id is find-your-product-prod)

Our example project would be a Vue.JS project.

Assumptions

This explanation assumed you already configured the basic settings in your firebase project like 1) Create a Firebase Project 2) Connect & Configure your SDK and 3) Execute Firebase Init and so on.

Steps

1. Locate yourself inside your project using your preferred command console (in my case git bash).
2. Create the two destinations target we are going to use by executing the following commands:

firebase target:apply hosting dev find-your-product-dev

firebase target:apply hosting prod find-your-product-prod

firebase target

Now, let’s explain the command structure:

firebase target:apply TYPE TARGET_NAME RESOURCE_IDENTIFIER

TYPE is the Firebase resource (hosting in this case).

TARGET_NAME is the name / aka / nickname for the target.

RESOURCE_IDENTIFIER is the project id you want to deploy to.

So, after executing these commands we will have two targets:

• One called dev aiming to our development project which project id is find-your-product-dev.
• One called prod aiming to our production project which project id is find-your-product-prod.

3. Adjust your firebase.json file to use deployment targets

firebase.json after setting deployment targets created in the previous steps.

4. Now, you only need to execute these final commands:

To load the env variables and build your project

npm run build

Then, you can deploy to the environment you want, remember that dev and prod are the target names I chose in this example. You can use yours.

firebase deploy — only hosting:dev

firebase deploy — only hosting:prod

Or if you want to deploy to both sites at the same time, just execute:

firebase deploy

I hope you find useful this exercise and explanations, feel free to comment with any questions or suggestions.

David P. Avila
Lead Full-Stack Developer at Cooweb LLC
portfolio ~linkedin ~ github ~ twitter