Netlify and Firebase Environment Variables

Netlify & Firebase & Environmental Variables & Secrets & dotenv

I am still chugging through this tutorial but making it my own once again by not using Heroku but my new best friend Netlify for hosting. Unfortunately for me, I was having a hell of a time getting my Firebase credentials to work, and the Netlify documentation didn't have a dead-simple list like my addled-brain requires.

Firebase Variables

So you want to use Firebase? Cool. That requires six variables to connect, which Firebase gives you when you create your database:

• API Key
• Auth Domain
• Database URL
• Project ID
• Storage Bucket
• Messaging Sender ID

Per the tutorial, you want to, in root, create two files .env.development and .env.test and pop the respective firebase information in each.

Production Time

First, add a couple of libraries to make life good-er:

$ yarn add dotenv cross-env --dev

dotenv allows the loading of .env files. We are going to put database credentials in these files and definitely 100% not going to commit them to a repo.

cross-env allows you to set NODE_ENV=test and whatnot across operating systems. Otherwise, you need to do an OS check and put in conditionals for this which is super lame.

Update Your Firebase File

Next, update your firebase file (this is a breaking change for now):

import * as firebase from 'firebase'

const config = {
  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
}

firebase.initializeApp(config)
const database = firebase.database()
export { firebase, database as default }

Creating dot-env Files

Create .env.development and .env.test files in the project root and copy over the appropriate credentials for each:

FIREBASE_API_KEY=ABCdefGHIjklMNOprqSTUvwxYZAbcd
FIREBASE_AUTH_DOMAIN=yourapp.firebaseapp.com
FIREBASE_DATABASE_URL=https://yourapp.firebaseio.com
FIREBASE_PROJECT_ID=yourapp
FIREBASE_STORAGE_BUCKET=yourapp.appspot.com
FIREBASE_MESSAGING_SENDER_ID=12345678901

Configure Webpack

There are three main changes we need to make to webpack. First, we need to add webpack.DefinePlugin which we use to suck up those environmental variables. Second, we need to configure this plugin and set it to each value. Last, we need to tell our program where to get these variables based on the environment.

Your webpack should look like this:

module.exports = (env) => {
  const isProduction = env === 'production'
  const CSSExtract = new ExtractTextPlugin('styles.css')
  
  return {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      })
    ],
  }
}

Environment Conditional in Webpack

Before the module.exports:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

if (process.env.NODE_ENV === 'test') {
  require('dotenv').config({path: '.env.test'})
} else if (process.env.NODE_ENV === 'development') {
  require('dotenv').config({path: '.env.development'})
}

Netlify Environment Variables

The docs as of this writing were informative but took me a bit to get what I wanted because I think they changed the interface a bit.

Through the Website's GUI

1. Login to netlify.com
2. Select your project
3. Click 'Site Settings'
4. 'Build and Deploy'
5. 'Continuous Deployment'
6. 'Link site to Git' (one time)
7. 'Advanced'
8. 'Build environment variables' - 'Edit variables'
9. Create a key-value pair of NODE_ENV and production
10. Enter the 6 Firebase keys and values (just the strings without quotation marks)
11. Save your environment variables
12. Push your build to Netlify
13. Go to Deploys and click 'Publish deploy' to restart the build with the environmental variables
14. Crack open a cold one

---