React Environment Variables

Scope

The article will explain the working and uses of environment variables. The article covers the following aspects of `environmental variables :

• What are environment variables and why they are used?
• How do environment variables work in React?
• Is there a need to install an external plugin to use environment variables?
• Various ways in which environment variables can be set up in React.
• Best practices to be followed while using environment variables.

Introduction to the Environment Variable

Environment variables in software development are used to configure different settings and conditions in the .env file. The variables in the .env file can be accessed and used by a global object process.env anywhere in the file structure or codebase.

There are many situations when the need of environment variables are needed. Some of the cases for example are :

• Developer maintains two different databases for development/testing and production to prevent the interference of testing data with production data. So two different DB configurations can be done using environment variables in the .env file and can be used when required.
• The hostname for development and production are also different and so the configuration can be done in a .env file using environment variables.

Environment variables store the values globally which can be accessed by the environment your codebase is running on. Whenever the configuration data changes then the change can be done at only one place in the .env file and the application can be deployed.

Why Do You Need Environment Variables?

Environment variables can be used in cases when :

• When you have to store sensitive data of the application and do not expose that data to the public repository. For example, if you want to store API keys, passwords, etc. then such data are stored in the .env file using environment variables, and the .env file is added to the gitignore file so that it is not exposed to the public repository when the code is pushed to GitHub.
• When you want to customize your application variables based on the environment your code is running on like a production environment, development environment, or staging environment.

Create React app support custom variables and you don't have to install any other packages.

• Temporary variables can be added using shell and it is validity is the same as shell session validity.
• using the .env file.

How Environment Variables Work in React

React Environment variables are written as key-value pair and it is defined in the shell before the server or application starts.

Example :

Environment variables in React start with the REACT_APP prefix to let the great engine know that these variables are reacted environment variables. Any variable without the prefix is ignored during bundling or prevents any private key on a machine that could have the same name.

A global object i.e process.env is injected by nodejs at runtime that tells the state of the environment in which your application is running. React loads all the react environment variables in the process.env object. These variables can be accessed globally using process.env throughout the codebase.

For example, if you have created an environment variable REACT_APP_API_KEY then you can access it anywhere in the codebase using process.env.REACT_APP_API_KEY.

The naming of the react environment variables is done using UPPERCASE letters, digits, and underscore(_) but cannot start with digits.

Do you have to Install any Plugin to Use the ENV Files?

You don't need to install any external plugins to use ENV files. You can create a .env file and create react environment variables inside the file in the form key-value pair which can be accessed throughout the codebase.

Set up Environment Variables

You can set up the react environment variables using different ways and then use that environment variables anywhere in the codebase, The different ways in which react environment variables can be set are :

* Using npm Scripts to Set Environment Variables

You have first to install webpack and webpack-CLI from npm by the command `$ npm install --save-dev webpack webpack-clip

Now open the package.json file and look for the script key and see the command used to run and build the web pack. The script key will be like

You can add the react environment variables with the `--envy flag in the script key value to set the environment variable.

Now you can run the script by the command npm tun dev and use the DEMO_API_URL variable in your react app.

The process.env.DEMO_API_URL will be converted to its actual value stored in the package.json file when the code gets compiled. But the web pack still does not know that there is a value attached to the DEMO_API_URL variable. To let the web pack convert the DEMO_API_URL variable to its actual value when the code is compiled you have to use an external plugin. (DefinePlugin)

Now if you compile the code then process.env.DEMO_API_URL will be compiled to the correct URL based on the mapping done in the package.json file.

* Using a Single .env File

The simplest way to use react environment variables is by creating a .env file in the root directory of your project. This .env file contains the key-value pair of all the variables needed in different environments of the application.

The .env contains sensitive data like database passwords which should not be visible to the public, so .env should be added to the .gitignore file.

* Using Multiple .env Files

While working on a project the developers mostly work with different environments like development, production, and testing environment.

You can create multiple .env files and use them in different environments like .env.development, .env.production, and .env.staging.

You can define the development database password and other sensitive info of the database in the .env.development file like :

* Declaring Temporary Environment Variables in the Shell

You can define a temporary environment within the shell on your machine depending on the operating system you are using in your machine. The code for different machines are :

• In windows, Open the command prompt and use the command :

• In Linux and macOS use the command :

* Setting the Active Environment using NPM Scripts

You can set the react environment variables for the required environment in the package.json file as npm scripts. The script will look like this:

The environment variable will be available in the webpack configuration and you can use the .env file in the webpack configuration.

More .env file can be created for different environments(for example for testing we can create .env.testing ) when you are setting the environment in the package.json file and creating the corresponding .env file.

Using Environment Variables

You can use react environment variables in javascript files by using the variable name defined in the .env file.

If you want to use the environment variable in html file then you can enclose the variable name around %. For example

You will have to define this variable in the .env file to use the variable in the HTML file.

Best Practices for Using Environment Variables

You should take care of a few things while using react environment variables in your codebase. The best practices for using environment variables are :

* Mapping Environment Variables with Readable Names

Environment variables will be used at many places in the codebase, so the names of the variables should be short and descriptive, and readable to avoid any confusion.

The variable names will be used as process.env.VARIABLE_NAME in the codebase.

Turbocharge Your React Journey! Dive into Our Full Stack Training Course with React-Expert Instructors. Enroll Now!