Loading environment variables in JS apps
Tags: react, node, security, configuration
Published: 2018-08-04 21:08:35

---
title: Loading environment variables in JS apps
published: true
tags: react,nodejs,security,configuration
canonical_url: 
---

#### How to store and consume environment variables for local development

APIs and third-party integrations require developers to use configuration data called **environment or config variables**. These variables are usually stored in password-protected places like CI tools or deployment pipelines, but how can we use them when we’re developing applications locally?

![](https://cdn-images-1.medium.com/max/1024/1*iTLvajtJ6tN3DnHArGKkDA.png)

#### TL;DR:

- Don’t store environment variables in source control
- Use [dotenv](https://github.com/motdotla/dotenv) to read data from your .env file
- create-react-app forces a namespace on environment variables

This short tutorial will explain one way of loading environment variables into your code when developing locally. The main benefit is that secrets such as API keys are not committed to source control to keep your application safer.

#### Requirements:

- A Javascript application
- A package manager (yarn and npm are great)
- Node 7+

### Set up the variables

Create a file called “.env” in the root of your repository. This file is called a “dot file” and is different from regular files in that it is usually hidden in file browsers.

Most IDEs will allow users to create files without a name, but if that’s not the case, head over to your terminal and cd into your application’s root folder.

```
touch .env
```

Next, set up your variables with the format key=value, delimited by line breaks:

```
API_KEY=abcde
API_URL=https://my-api.com/api
```

Finally, make sure the .env file is not committed to your repository. This can be achieved by opening (or creating) a .gitignore file and adding this line:

```
.env # This contains secrets, don't store in source control
```

### Consume the variables

Head to your terminal to install [dotenv](https://github.com/motdotla/dotenv) with your preferred package manager:

```
# Using npm:
npm i dotenv

# Using yarn:
yarn add dotenv
```

You’re now ready to read from your .env file. Add this line of code as early as possible in your application. With React apps, that’s usually index.js or App.js, but it’s entirely up to your setup:

```
require('dotenv').config();
```

And that’s it! Your application should have access to environment variables via the process.env object. You can double-check by calling:

```
console.log(process.env);
```

If all is well, you should see something like:

```
{
 NODE_ENV: "development",
 API_KEY: "abcde",
 API_URL: "https://my-api.com/api"
}
```

🎉 You’re now ready to use environment variables in your application!

Now, for those of us that use create-react-app, there’s a catch, and I wish it was documented a little better.

### Using create-react-app

Facebook’s [create-react-app](https://github.com/facebook/create-react-app) works a little differently. If you followed the steps above and haven’t ejected the application, all you should see is the NODE\_ENV variable. That’s because **create-react-app only allows the application to read variables with the**  **REACT\_APP\_ prefix.**

So in order to make our variables work, we’ll need to update our .env file like so:

```
REACT_APP_API_KEY=abcde
REACT_APP_API_URL=https://my-api.com/api
```

Once again, verify your setup by logging process.env to the console:

```
{
 NODE_ENV: "development",
 REACT_APP_API_KEY: "abcde",
 REACT_APP_API_URL: "https://my-api.com/api"
}
```

And you’re done 😎

### Tips

Variables in .env files don’t require quotation marks unless there are spaces in the value.

```
NO_QUOTES=thisisokay
QUOTES="this contains spaces"
```

It’s good practice to create a .env.sample file to keep track of the variables the app should expect. Here’s what my own sample file looks like in my current project. Note that it explains where someone might be able to find those keys and URLs.

```
CONTENTFUL_SPACE_TOKEN="see Contentful dashboard"
CONTENTFUL_API_KEY="see Contentful dashboard"
S3_BUCKET_URL="check AWS"
SHOW_DEBUG_SIDEBAR="if true, show debug sidebar"
```

### Further reading:

- [Reading configuration in the environment in the 12-Factor App methodology](https://12factor.net/config)

Thank you for reading! Do you prefer another way of loading environment variables locally? I’d love to hear about it in the comments below!