Javascript Environment Variables Loading environment variables in JS apps

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?

TL;DR:

• Don’t store environment variables in source control
• Use 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 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 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

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!