Categories
Tutorials

Setting environment variables in Node and React

An environment variable is a variable that is set from outside an application, usually from the operating system. If you’re using Linux, MacOS or Windows, your operating system already has some default environment variables which you can access from your terminal or from inside an application that you are writing. Some most popular examples of environment variables are HOME and PATH – you can try to read their values from your terminal:

▶ echo $HOME
▶ echo $PATH

If your application uses different variables values for different environment (or between different developers), you should be using an environment variable.

Let’s imagine that your team is making an application which connects to a database to retrieve data. During development everyone is using a database running on their own machine, so everyone might have a different database password. The database password on production will be different too. That’s the perfect case to use environment variables in your application. Your application code stays the same (doesn’t need to have the database password defined in it) and everyone will load their own values for the database password when they are running it.

Setting environment variables in Node

Let’s create a basic Node project in which we’ll use an environment variable. We create a directory and we’ll write some JavaScript and use npm init to create a package.json file. You’ll get an output like this:

▶ mkdir myproject
▶ cd myproject 
▶ npm init -y
Wrote to /your/path/here/myproject/package.json:

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now we’ll create an index.js file and check if our script is working. The content of the index.js file will be a console.log() function, and it will output Hello when you run it:

"use strict";

console.log(`Hello`);

We now run index.js and see if all is fine:

▶ node index.js 
Hello

You can also drop a console.log(process.env); in index.js to see the list of environment variables that your system already has. Now we’ll add support for environment files by using the dotenv package. We install the package and wait for installation to be completed:

▶ npm install dotenv

We create a .env file (it’s a file called .env, just like .gitignore or .htaccess) and add some values to it. Each variable will be on its own line and will be in the format NAME=VALUE. For example:

USERNAME=Bob
SOME_API_KEY=ZXOW12F9231G
DATABASE_PASSWORD=GBDcsfd32423DFS

We need to load the environment variables using require('dotenv').config() before accessing them. Then our variables will be accessible using process.env.USERNAME and process.env.SOME_API_KEY from index.js

"use strict";
require('dotenv').config(); // load the .env file
console.log(`Hello ${process.env.USERNAME}`);
console.log(`Your password is ${process.env.DATABASE_PASSWORD}`);
▶ node index.js
Hello Bob
Your password is GBDcsfd32423DFS

And it works! Now we’ll see how to use environment variables in React apps.

Setting environment variables in React

The process of using an environment variable in React is similar to that of Node, with one exception – In React, the environment variable that you use should start with REACT_APP_. This has been implemented to prevent you from declaring a key that already exists.

The .env file we used in the Node example thus becomes:

REACT_APP_USERNAME=Bob
REACT_APP_SOME_API_KEY=ZXOW12F9231G
REACT_APP_DATABASE_PASSWORD=GBDcsfd32423DFS

You invoke those variables use them the same method as for Node:

console.log(process.env.REACT_APP_USERNAME);
console.log(process.env.REACT_APP_SOME_API_KEY);
console.log(process.env.REACT_APP_DATABASE_PASSWORD);