Load environment variables dynamically for your React applications created with create-react-app.

This will create a env.js file in your public and build directories, which will expose your environment variables you want in the global window.env variable.
It will also take care of configuring the index.html file present in those directories to load that file.

npm install @ludovicm67/react-dotenv

Create a .env file at the root of your project, with some relevant values, like this:

API_URL=https://example.com
SOME_OTHER_VARIABLE=foo

Open your project’s package.json file and add:

• the react-dotenv command to your start and build scripts.
• the react-dotenv.whitelist property to specify which variables you need to be exposed.

Here is an example:

package.json:

{
  // …other fields

  "scripts": {
    "start": "react-dotenv && react-scripts start", // <-- append command
    "build": "react-dotenv && react-scripts build", // <-- append command
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

  // …some other fields

  // Add the react-dotenv configuration
  "react-dotenv": {
    "whitelist": ["API_URL"]
  }
}

You can start the development server using the following command:

npm run start

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

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

import React from "react";
import env from "@ludovicm67/react-dotenv";

const MyComponent = () => {
  return <div>{env.API_URL}</div>;
};

export default MyComponent;

import React from "react";

const MyComponent = () => {
  return <div>{window.env.API_URL}</div>;
};

export default MyComponent;

This only supports one environment (so only one .env file) and is not meant to do more.

Forked from jeserodz/react-dotenv.

Reasons:

• upgrade dependencies
• use ESM
• fix TypeScript types
• fix the import of the env.js file in the index.html files