react-dotenv 🎛

Load environment variables dynamically for your React applications created with CRA (Create-React-App).

Installation

1npm install react-dotenv

Usage

1. Setup your project

Open your project's package.json file and:

1. Add an .env file to your project root (or just load from the system environment variables).
2. Add the react-dotenv NPM command to your start, build (and your serve commands).
3. Add the react-dotenv.whitelist property to package.json to specify which variables you need exposed.

Example

package.json:

1{
2  "name": "my-react-app",
3  "version": "0.1.0",
4  "dependencies": {
5    "react": "^16.13.1",
6    "react-dom": "^16.13.1",
7    "react-dotenv": "^0.1.0",
8    "react-scripts": "3.4.3",
9    "serve": "^11.3.2"
10  },
11  "scripts": {
12    "start": "react-dotenv && react-scripts start", // <-- append command
13    "build": "react-dotenv && react-scripts build", // <-- append command
14    "serve": "react-dotenv && serve build", // <-- append command
15    "test": "react-scripts test",
16    "eject": "react-scripts eject"
17  },
18  "eslintConfig": {
19    "extends": "react-app"
20  },
21  "browserslist": {
22    "production": [">0.2%", "not dead", "not op_mini all"],
23    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
24  },
25  // Add the react-dotenv configuration
26  "react-dotenv": {
27    "whitelist": ["API_URL"]
28  }
29}

2. Run your project

1npm start

Now your project have the environment variables loaded globally in the window.env property.

3. Read the environment variables

You can access the environment variables from your code in two ways:

A. Using the react-dotenv library

1import React from "react";
2import env from "react-dotenv";
3
4export function MyComponent() {
5  return <div>{env.API_URL}</div>;
6}

B. Using the window.env global variable

1import React from "react";
2
3export function MyComponent() {
4  return <div>{window.env.API_URL}</div>;
5}