Styjun

I have been trying to deploy my firebase&vue app.
However I couldn't add firebase credentials to the env variable.

Basically this is the structure on vue.js

• 
  

  config

  
  
  

  ---- key.js

  
  
  

  ---- keys_dev.js

  
  
  

  ---- keys_prod.js

  
  

key.js

if(process.env.NODE_ENV == 'production')
 module.exports = require('./keys_prod');
 else 
 module.exports = require('./keys_dev');

keys_dev.js

module.exports = 
firebase: 
 apiKey: "*********************************",
 authDomain: "*****************************",
 databaseURL: "****************************",
 projectId: "******************************",
 storageBucket: "**************************",
 messagingSenderId: "**********************",
 

keys_prod.js

module.exports = 
 firebase: 
 apiKey: process.env['FIREBASE_apiKey'],
 authDomain: process.env['FIREBASE_authDomain'],
 databaseURL: process.env['FIREBASE_databaseURL'],
 projectId: process.env['FIREBASE_projectId'],
 storageBucket: process.env['FIREBASE_storageBucket'],
 messagingSenderId: process.env['FIREBASE_messagingSenderId'],
 

Also I tried like this in keys_prod.js but I guess we can not use object in the env_var, so I changed it to the code above.

module.exports = 
 firebase: process.env.FIREBASE_CONFIG

After npm run build, I created express app, define process.env's however when I run server, I am getting error because of env_vars are missing.
I tried to see logs on both front and backend console. I can see envs on node console but not in browser.
I also tried to deploy this app to heroku and firebase hosting. In both cases I added envs externally, but nothing change. (I guess there is no difference to use env_vars in localhost or remote server right ?)

Finally I tried to change keys.js (keys_prod > keys_dev)

if(process.env.NODE_ENV == 'production')
 module.exports = require('./keys_dev');
 else 
 module.exports = require('./keys_dev');

then it works, but I can find the credentials in the source code this time.

Here how you can do it.

Firstly, add dev.env to your project and add firebase variables.

FIREBASE_CONFIG: 
 apiKey: "*********************************",
 authDomain: "*****************************",
 databaseURL: "****************************",
 projectId: "******************************",
 storageBucket: "**************************",
 messagingSenderId: "**********************",
 

Import the file in dev.env.js

import merge from 'webpack-merge';
import env from './dev.env';

module.exports = merge(env, 
 NODE_ENV: 'development'

Now, Initialize your firebase app with

import * as firebase from 'firebase';
firebase.initializeApp(VUE_APP_FIREBASE_CONFIG)

There you go! Firebase is set up for you

Hope this helps!