Is it possible to use dotenv in a react project?

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?

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.

The short answer is no. A browser cannot access local or server environment variables so dotenv has nothing to look for. Instead, you specify ordinary variables in your React application, usually in a settings module.

Webpack can be made to take environment variables from the build machine and bake them into your settings files. However, it works be actually replacing strings at build-time, not run-time. So each build of your application will have the values hard-coded into it. These values would then be accessible through the process.env object.

var nodeEnv = process.env.NODE_ENV;

Additionally, you could use the DefinePlugin for webpack which lets you explicitly specify different values depending on your build target (dev, prod, etc.). Note that you have to JSON.stringify all values passed into it.

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

This is fine for any sort of public details but should never be used for any sort of private keys, passwords or API secrets. This is because any values baked in are publicly accessible and could be used maliciously if they contain sensitive details. For those sorts of things, you need to write some server-side code and build a simple API which can authenticate with the 3rd party API using the secrets, then pass the relevant details along to your client-side application. Your server-side API acts as an intermediary, protecting your secrets while still getting the data you need.

Actually, you can use dotenv in your React app with webpack. Moreover, there are several ways of doing it. However, keep in mind that it's still a build-time configuration.

1. A similar way to the answer above. You import dotenv in your webpack config and use DefinePlugin to pass the variables to your React app. More complete guide on how you can inject your .env files depending on current configuration could be found in this blog.

2. Using a dotenv-webpack plugin. I personally find it really convenient. Let's say you have environments: dev, staging and prod. You create .env file for each environment (.env.dev, .env.staging, etc). In your webpack configuration you need to pick a correct file for the environment:

   const Dotenv = require('dotenv-webpack');
   
   module.exports = (env, argv) => {
       const envPath = env.ENVIRONMENT ? `.env.${env.ENVIRONMENT}` : '.env';
   
       const config = {
           ...
           plugins: [
               new Dotenv({
                   path: envPath
               })
           ]
       };
   
       return config;
   };
   

When you build the app for a particular environment, just pass the environment name to webpack:

webpack --config webpack.config.js --env.ENVIRONMENT=dev

1. Create .env file

   API_URL=http://localhost:8000
   

2. Install dotenv npm package

   $ npm install --save-dev dotenv
   

3. Config webpack to add env variables

   const webpack = require('webpack');
   const dotenv = require('dotenv');
   
   module.exports = () => {
     // call dotenv and it will return an Object with a parsed key 
     const env = dotenv.config().parsed;
   
     // reduce it to a nice object, the same as before
     const envKeys = Object.keys(env).reduce((prev, next) => {
       prev[`process.env.${next}`] = JSON.stringify(env[next]);
       return prev;
     }, {});
   
     return {
       plugins: [
       new webpack.DefinePlugin(envKeys)
     ]
   };
   

4. Great job! Enjoy React and dotenv.