Is it possible to use dotenv in a react project?

Question

I am trying to set some environment variables (for making API calls to dev/prod endpoints, keys depending on dev/prod, etc.) and I'm wondering if using dotenv will work.

I've installed dotenv, and I am using webpack.

My webpack entry is main.js, so in this file I've put require('dotenv').config()

Then, in my webpack config, I've put this:

  new webpack.EnvironmentPlugin([     'NODE_ENV',     '__DEV_BASE_URL__'  //base url for dev api endpoints   ]) 

However, it is still undefined. How can I do this correctly?

Answer 1

Sorry for picking up old question, but
react-scripts actually uses dotenv library under the hood.

With [email protected] and higher, you can work with environment variables this way:

1. create .env file in the root of the project
2. set environment variables starting with REACT_APP_ there
3. access it by process.env.REACT_APP_... in components

.env

REACT_APP_BASE_URL=http://localhost:3000 

App.js

const BASE_URL = process.env.REACT_APP_BASE_URL; 

See docs for more details.