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 yourstart
andbuild
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 theindex.html
files