How to save firebase config parameters in environment variables in vuejs when using firebase hosting

Question

I'm new to firebase. I've employed it into my vuejs project. How do i save the firebase config parameters into environment variables. Or is there a better way to achieve this.

Answer 1

Use .env.js files in vue

This is actually not really needed as you can also store the config directly in the main.js file. Also, these firebase config data is public and needs not to be protected. Still here is how you do it.

---

In your prod.env.js file (located for my setup under the folder config) add

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  FIREBASE_API_KEY: '"APIKEY"',
  FIREBASE_AUTH_DOMAIN: '"YOURID.firebaseapp.com"',
  FIREBASE_DATABASE_URL: '"YOURURL"',
  FIREBASE_PROJECT_ID: '"YOURID"',
  FIREBASE_STORAGE_BUCKET: '""',
  FIREBASE_MESSAGING_SENDER_ID: '"YOURSENDERID"',
  FIREBASE_APP_ID: '"YOURAPPID"',
}

In main.js call the env variables with process.env.VARIABLENAME.

Here is the setup for firebase:

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};

Answer 2

you can always create a new file that contains all the configuration settings and gitignore that file hence making it secure.

It depends only on your project structure. Just import this file wherever it is needed without compromising your security