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