How to Switch Firebase Project Using Dotenv

What I wanted to do

I wanted to have staging environment and production environment separately.

How to switch the project

Step1 – Make two Firebase Projects

Make two Firebase projects. One is for staging and the other is for production. It is better to have project names such as “hoge-staging” and “hoge-production” so that you can tell which project you are using.

Step2 – Make your app

Make your app with one of the project. When you initialize your Firebase Hosting, you choose which project you use. If you are already doing that, just skip this step.

Step3 – Add the other project

Add the other project with Firebase command.

firebase use --add

It will ask you which project you want to add. Specify the one you made for the other environment. You also have to give it an alias. It is good to have alias like “staging” or “production”.

Now you can switch the environment you host by just a simple command below.

firebase use ALIASYOUGAVE

You are done!…BUT you still cannot switch which database and storage you use by this command. We still have some work to be done.

Step4 – Install dotenv-webpack

Install dotenv-webpack. dotenv-webpack is an webpack plugin that enable you to use Dotenv. Dotenv loads environment variables from a .env file into process.env.

You can install dotenv-webpack with the command below.

npm install dotenv-webpack --save

Step5 – Prepare two .env files

Prepare two .env files. I made .env file and production.env file. Put your config for Firebase in those files like example below.

.env

apiKey = hogehogehoge
authDomain = hoge.firebaseapp.com
databaseURL = https://hoge.firebaseio.com
projectId = hoge
storageBucket = hoge.appspot.com
messagingSenderId = 00000000

Please make sure that you put your own config you can get from Firebase console. In this file, you put the config for your staging project.

production.env

apiKey = hogehogehoge
authDomain = hoge.firebaseapp.com
databaseURL = https://hoge.firebaseio.com
projectId = hoge
storageBucket = hoge.appspot.com
messagingSenderId = 00000000

Here you put the config for your production project.

Now you are ready to get the config from the environment variable. You can get the config with process.env. Your app is using .env file, not production.env file.

firebaseApp.js

import firebase from 'firebase'

const config = {
  apiKey: process.env.apiKey,
  authDomain: process.env.authDomain,
  databaseURL: process.env.databaseURL,
  projectId: process.env.projectId,
  storageBucket: process.env.storageBucket,
  messagingSenderId: process.env.messagingSenderId
}

const firebaseApp = firebase.initializeApp(config)
export default firebaseApp

Step6 – Rewrite package.json

Rewrite package.json so that you can switch the config.

package.json

 "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit/specs",
    "deploy-staging": "npm run build && firebase use staging && firebase deploy;",
    "deploy-production": "mv .env staging.env && mv production.env .env && npm run build && firebase use production && firebase deploy && firebase use default && mv .env production.env && mv staging.env .env"
  },
  "dependencies": {

As you read, I changed the file name of production.env to .env when you want to deploy to production environment. After deployment, I changed it back so that you won’t deploy to it accidentally. Finally, you can switch Firebase projects with

npm run deploy-staging

and

npm run deploy-production

2 thoughts on “How to Switch Firebase Project Using Dotenv”

Leave a Comment