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
- Locate yourself inside your project using your preferred command console (in my case git bash).
- 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
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