Modern web applications make heavy use of various types of APIs. To make them work, they need keys or some other information to identify and track each API use. Holding API keys is one of the many applications of environment variables. In general, their primary purpose is to store credentials essential for web development. It also gives application developers a single space to adjust the configuration data when needed. This way, there’s no need to find and edit every instance of configuration data manually.
At first, React environment variables might be confusing, especially for those who don’t have a back-end experience. However, developers who intend to work on large-scale applications should familiarize themselves with environment variables.
Rules for React Environment Variables
Note that the values stored in environment variables are not private. For instance, they’re not practical for storing secret API keys. Once your app is deployed, the environment variable values will be visible in the source code. Every time you add an environment variable, you must restart your application before referencing the value stored in them.
Environment Variables in
React projects built with
create-react-app with the
react-scripts version @0.5.0 or higher support environment variables, so no external package is needed.
As long as you’ve installed the latest version of the
create-react-app package, all you need to do is create a
.env.local file in the main directory (the same folder that includes
package.json, and other files) and use it to define the variables. Here’s an example:
REACT_APP_CREDENTIAL_DATA = 'some-credential-data'
.env.local extension is necessary to ensure that the file is automatically added to the
.gitignore file when the project is initialized.
create-react-app’s built-in support for environment variables, you must prefix the variable names with
Environment Variables Without
If you have a custom React environment without
react-scripts you’ll need to install an external package to use environment variables in React.
To this end, you can install a popular
dotenv package built specifically for this purpose.
First, you must open the command line in the project folder and install this package:
npm install dotenv
Then, you must make it available and configure the settings. Add the following code to the app:
Once you do this, you can create a
.env.local file in the folder, just like you would for the apps built with
create-react-app. You must also start variable names with