Firebase config file for both dev and prod

Question

Quick question.

I have an vue js app.

Its hosted on firebase.

When using

firebase use default
firebase deploy
or
firebase use prod
firebase deploy

I already set up the prod alias to point to my prod environment.

Given:

firebaseConfig.js

import firebase from 'firebase'
import 'firebase/firestore'

// firebase init goes here
const config = {
    apiKey: "<apikey ...>",
    authDomain: "< ... >",
    databaseURL: "< ... >",
    projectId: "< ... >",
    storageBucket: "< ... >",
    messagingSenderId: "< ... >",
    appId: "< ... >"
}
firebase.initializeApp(config)

// firebase utils
const db = firebase.firestore()
const auth = firebase.auth()
const database = firebase.database()
const currentUser = auth.currentUser

const settings = {
}
db.settings(settings) ....
.....

How can I set up the firebaseConfig.js file in my project to use prod specific settings when using the 'firebase use prod && firebase deploy' commands?

Example:

firebaseConfig.js

// firebase init goes here
const defaultConfig = {
    apiKey: "<dev-apikey >",
    authDomain: "<devAuth >",
    databaseURL: "<devUrl>",
    projectId: "<devId >",
    storageBucket: "< dev-storageBucket >",
    messagingSenderId: "< devSenderId >",
    appId: "< dev-appId >"
}

const prodConfig = {
    apiKey: "<prod-apiKey>",
    authDomain: "< prodAuth >",
    databaseURL: "< prodUrl >",
    projectId: "< prodId >",
    storageBucket: "< prod-storageBucket >",
    messagingSenderId: "< prodSenderId >",
    appId: "< prod-appId >"
}
firebase.initializeApp(defaultConfig, prodConfig) ???
........
........
........

Please let me know if you need more clarity.

In the mean time I will continue looking for answers :D

score 1 · Accepted Answer · answered Oct 31 '19 at 18:48

Figured it out!!!

Another post covered it. Granted this is if you are using vue cli 3 but other wise there are options for vue 2.

Link to the answer that helped me: stackoverflow

And then a great blog that helped me troubleshoot any issues I had and how to structure my .env files: aligator.io

Also the official vue documentation for setting up development modes / environment variables: Vue Docs

Hope this helps someone!!!!

Firebase config file for both dev and prod

1 Answers1