Using .env with React & Node

_NOTE: This article was originally written on Oct, 2018.

In this article, I’m assuming you have heard of environment variables and may have even seen process.env in some places of your code. If not read this: “process.env: What it is and why/when/how to use it effectively”. The article is a great explainer and gives a really detailed idea on why it’s important to use environment variables.

My application is a single repo app using a Node backend and a React front end. You can find it here: https://github.com/np6176a/feedMe. This means for my project I have two .env files, one for the Node instance and the other for the React instance. FYI for the beginners, you won’t see my .env files in github. In fact you should not ever commit your .env file to GitHub repo and should keep it in .gitignore. This is where you keep your secret keys that you don’t want anyone else using.

The directory structure in my case with the .env files looks like this:

-feedMe
|_  .gitignore
|_  —client
    |_ .env
|_  -server
    |_ server.js
    |_ .env

If you initiated your React app with either Next.Js or Create React App you don’t need any other packages to get going. You can just start by creating your .env file in the root directory of the React App. Then for each key make sure to name it with REACT_APP_ before your key name. So your key name would be REACT_APP_KEY_NAME. The REACT_APP_ is necessary for both Next.Js and Create React App to recognize the key. An example of this use case is:

#Declaring your Secret Key in your .env file
$ REACT_APP_API_KEY = exampleAPIKEY

#Using the above key in code
const apiKey = process.env.REACT_APP_API_KEY

For the Node instance you need to first install dotenv node package in your root directory, in my case in the feedme directory.

$ yarn add dotenv
#or
$ npm install dotenv --save

Then create the .env file inside the directory you have your initial index.js or server.js file that run your Node app. In my case this was inside my server directory. Then define your keys inside the .env file MY_KEY=myexampleAPIkey. You can now use it anywhere in your Node App like so: process.env.MY_KEY.

The above is a very basic rundown on how to start using environment variables for either Node or React applications. Here are some other articles that I found super helpful when learning about environment variables:

• Using environment variables in React: https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5
• Using React in Multiple Environments (My favorite): https://daveceddia.com/multiple-environments-with-react/
• Using dotenv : https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f
• process.env What it is and why/when/how to use it effectively: https://codeburst.io/process-env-what-it-is-and-why-when-how-to-use-it-effectively-505d0b2831e7

Comments

[José Pablo Ramírez Vargas]

There are two major disadvantages to dotenv and the whole "I depend on environment variables for my configuration":

1. It is not hierarchical in nature.
2. It is not meant for React.

The Create React App documentation explains #2 in more detail. It is a hack based on the fact that CRA is mounted on a NodeJS server, and dotenv is for NodeJS. When you build your React application, the environment variables are removed and their values hardcoded in the resulting build.

As for #1, it is a major pain to have more than a few configuration values in a non-hierarchical configuration system. Imagine you have to program 50 different URL's using 5 different hosts. The hosts need to change per environment. This forces you to make a concatenation party between the host names stored in the environment variables and the corresponding paths. Plus, add configuration values like timeouts, keys, passwords, etc.

I certainly cannot recommend the continued use of dotenv, having a hierarchical configuration library readily available (wj-config]. This new alternative is hierarchical in nature, allows multiple data sources and provides overriding logic. As if this weren't enough, it builds URL functions so you don't have to concatenate URL's in code. The functions do URL route and query string replacement using URL-encoded values.