You build your web app, push it your GitHub and invite others to show your work. This is great as your GitHub forms your proof of work, opening opportunities for you. But what if your app had some sensitive data, were you careful while pushing it?

Tl;dr

• Use environment variables to keep data(API keys, database credentials etc) secure.
• DO NOT write them directly into code.
• Create .env file, specify each variable with prefix REACT_APP_
• Access the variable using process.env.REACT_APP_VARIABLE_NAME
• Add .env file to your .gitignore before you push the code to the repository
• Remember, this does not entirely solve the issue in case of React and frontend. So do not add anything sensitive(token, passwords etc).

Environment Variables

When we work with API's like Firebase, Stripe or other services they require some configuration. This could be a token, a username or any other private information which SHOULD remain secret and safe.

As this configuration is only assigned once and cannot be changed, we store them in constant variables. Now replace these with environment specific variables that are stored elsewhere - decouple it from your code.

Why ?

Configurations change, environment to environment not the code.

Your user would be using a different configuration to what you had while developing the app. So now anyone trying to set up the app would only need to set the environment variable, without messing with your code.

Setting up .env 🔧

.env is a file containing a list of all variables for your environment. You could configure it to be anywhere, but it is a common practice to place it under the root of the project.

$touch .env

Edit this .env file to add your variables but keep in mind these points :

• Environment variables are specified in KEY=VALUE format.
• Values assigned to variables are actually strings. Which means variable assigned as PORT=5000 will have the value '5000'.
• No spaces before and after equal sign. If there is no value use quotes.

#.env
REACT_APP_API_KEY=Wcj4PdWBBZHv7qH8IMopUsHP2Ssst1BE
REACT_APP_API_HOST=some.example.someapi.com

The above example is of how you name your environment variables in React. 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_. If you are not working in React, then you could ignore the prefix REACT_APP_.

These variables are injected into the application at build/compile time. This means the server needs to be restarted when you add/update variables in .env, in order to see changes.

Accessing variables 👈

Check out dotenv to read .env file, if you are working with Javascript(using node). However, React already comes with an implementation of it so you needn't install it explicitly.

You can access the variables directly into your React app using process.env.REACT_APP_API_KEY and process.env.REACT_APP_API_HOST.

I recommend python-dotenv, if you are using Python.

Keeping them 🔒

We've defined our .env file, done with our code and are looking to push this into production. Since we don't want Git to track this file and prevent it from getting public, add this to your .gitignore file.

#.gitignore
.env

So you've successfully kept them secret from others looking into it.

But we also intend them to run the application in their machine, right ?

This is why it's always good to leave a template or sample .env file for them.

#.env.sample
REACT_APP_API_URL=
REACT_APP_API_HOST=

Leave the secret variables empty. This way they could rename the file to .env and configure the application, with their own set of secret variable values.

• Dont forget to commit and push this template to your remote repository.
• If you're using Netlify, Vercel and the likes to deploy your app, then you will need to add these variables from their settings.

😬Final words...

Thought your secrets are safe now? Well... Not really. It is hidden only from the public repository.

Inspect your app and open the Network tab. See your keys there ? Well this topic is beyond the scope of this post, but just remember environment variables provided as REACT_APP_ will be embedded in the application so they should not contain anything sensitive. To know more about protecting frontend environments check out this.

Environment variables help you to abstract the configuration from your code, but also help in keeping our secrets. But as simple as this may be, its use is influenced by considerations such as environment and the application type.

As with any technology, the trick isn't knowing how to use something, it's knowing when to use it.