Various ways of handling environment variables in React and Node.js
By: Yogesh Chavan
Tags: Programming, JavaScript, React, Development, Nodejs

Various ways of handling environment variables in React and Node.js

Learn the way to secure your application data using environment variables

Photo by Fotis Fotopoulos on Unsplash

Using Environment variables is very important to keep your private information secure.

It may contain your API keys or database credentials or any other private information. It’s always recommended to use environment variables to keep the information secure and you should never write them directly in your code.

Also, you need to make sure that, you add the environment variables file name to your .gitignore file so it will not be added to your Git repository when you push the code to the repository.

Let’s look at the various ways of using the environment variables

Using Create React App

with single .env file:

If you’re using create-react-app, then to use environment variables in your application, you need to create a .env file in the root of your project with each variable name starting with REACT_APP_

Create React App will make sure, the variables declared in the .env file will be available in your application if you're naming it starting with REACT_APP_

For example, If your .env file looks like this:

REACT_APP_CLIENT_ID=abcd2whdkd

REACT_APP_API_KEY=3edcb4f9dd472ds4b47914ddcfb1791e1e1ab

Then you can access the variables directly in your React application using process.env.REACT_APP_CLIENT_ID and process.env.REACT_APP_API_KEY

Demo: https://codesandbox.io/s/env-vars-create-react-app-mr0rl

with multiple .env files:

If you’re having multiple .env files like .env.prod , .env.uat , .env.dev for production, UAT, and development environment respectively then just using REACT_APP_ for environment variable name will not work.

Suppose, you’re using the firebase database in your application and your firebase configuration looks like this:

For the development environment:

const config = {

apiKey: 'AIdfSyCrjkjsdscbbW-pfOwebgYCyGvu_2kyFkNu_-jyg',

authDomain: 'seventh-capsule-78932.firebaseapp.com',

databaseURL: 'https://seventh-capsule-78932.firebaseio.com',

projectId: 'seventh-capsule-78932',

storageBucket: 'seventh-capsule-78932.appspot.com',

messagingSenderId: '3471282249832',

appId: '1:3472702963:web:38adfik223f24323fc3e876'

};

For the production environment:

const config = {

apiKey: 'AIzaSyCreZjsdsbbbW-pfOwebgYCyGvu_2kyFkNu_-jyg',

authDomain: 'seventh-capsule-12345.firebaseapp.com',

databaseURL: 'https://seventh-capsule-12345.firebaseio.com',

projectId: 'seventh-capsule-12345',

storageBucket: 'seventh-capsule-12345.appspot.com',

messagingSenderId: '3479069249832',

appId: '1:3477812963:web:38adfik223f92323fc3e876'

};

but you should not write this code directly in your application because anyone can just copy-paste the above configuration into their app and can manipulate your firebase data so Instead, you should create an environment variable for each property of the config object and use that.

If you create a .env.prod file for the production environment then it will look like this:

REACT_APP_API_KEY=AIzaSyCreZjsdsbbbW-pfOwebgYCyGvu_2kyFkNu_-jyg

REACT_APP_AUTH_DOMAIN=seventh-capsule-12345.firebaseapp.com

REACT_APP_DATABASE_URL=https://seventh-capsule-12345.firebaseio.com

REACT_APP_PROJECT_ID=seventh-capsule-12345

REACT_APP_STORAGE_BUCKET=seventh-capsule-12345.appspot.com

REACT_APP_MESSAGING_SENDER_ID=3479069249832

REACT_APP_APP_ID=1:3477812963:web:38adfik223f92323fc3e876

and your .env.dev file will look like this:

REACT_APP_API_KEY=AIdfSyCrjkjsdscbbW-pfOwebgYCyGvu_2kyFkNu_-jyg

REACT_APP_AUTH_DOMAIN=seventh-capsule-78932.firebaseapp.com

REACT_APP_DATABASE_URL=https://seventh-capsule-78932.firebaseio.com

REACT_APP_PROJECT_ID=seventh-capsule-78932

REACT_APP_STORAGE_BUCKET=seventh-capsule-78932.appspot.com

REACT_APP_MESSAGING_SENDER_ID=3471282249832

REACT_APP_APP_ID=1:3472702963:web:38adfik223f24323fc3e876

To access these environment-specific files, install the env-cmd npm package using the following command:

yarn add env-cmd OR npm install env-cmd

and then change the package.json file script section to use env-cmd command

"scripts": {

"start": "env-cmd -f .env.dev react-scripts start",

"start-prod": "env-cmd -f .env.prod react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"

},

So now, when you run the yarn start or npm start command from the terminal, it will load the environment variables from the .env.dev file and when you run the yarn start-prod or npm start-prod command from the terminal, it will load the environment variables from the .env.prod file.

You can even create a single .env-cmdrc , If you're using env-cmd npm package and declare all environment variables in a single file as a JSON object like this:

{

"dev": {

"REACT_APP_API_KEY": "AIdfSyCrjkjsdscbbW-pfOwebgYCyGvu_2kyFkNu_-jyg",

"REACT_APP_AUTH_DOMAIN": "seventh-capsule-78932.firebaseapp.com",

"REACT_APP_DATABASE_URL": "https://seventh-capsule-78932.firebaseio.com",

"REACT_APP_PROJECT_ID": "seventh-capsule-78932",

"REACT_APP_STORAGE_BUCKET": "seventh-capsule-78932.appspot.com",

"REACT_APP_MESSAGING_SENDER_ID": "3471282249832",

"REACT_APP_APP_ID": "1:3472702963:web:38adfik223f24323fc3e876"

},

"prod": {

"REACT_APP_API_KEY": "AIzaSyCreZjsdsbbbW-pfOwebgYCyGvu_2kyFkNu_-jyg",

"REACT_APP_AUTH_DOMAIN": "seventh-capsule-12345.firebaseapp.com",

"REACT_APP_DATABASE_URL": "https://seventh-capsule-12345.firebaseio.com",

"REACT_APP_PROJECT_ID": "seventh-capsule-12345",

"REACT_APP_STORAGE_BUCKET": "seventh-capsule-12345.appspot.com",

"REACT_APP_MESSAGING_SENDER_ID": "3479069249832",

"REACT_APP_APP_ID": "1:3477812963:web:38adfik223f92323fc3e876"

}

}

and then use the -e flag for specifying which environment to refer in your package.json file like this:

"scripts": {

"start": "env-cmd -e dev react-scripts start",

"start-prod": "env-cmd -e prod react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"

},