Loading values from environment variables in my React application not working

Question

In my React app (using create react app) I have a Constants.js file that has the folowing constants:

export const API_ROOT = process.env.REACT_APP_API_ROOT || 'http://www.example.com.com:4000/api';
export const APP_ROOT = process.env.REACT_APP_APP_ROOT || 'http://app.example.com:3001';

For some reason this is not being picked up on my server even though I have defined the ENV variables on the server. I changed the values around just to see where the values are being picked up from.

API_ROOT=http://dev.example.com/api
APP_ROOT=http://app.example.com
REACT_APP_API_ROOT=http://www.example.com:3002/api
REACT_APP_APP_ROOT=http://app.example.com:3002

I wasn't sure of the naming convention so I defined all 4 of the above. When I push to my server I still see the API_ROOT and APP_ROOT values being the defaults i.e. not from the ENV variable:

  http://www.example.com.com:4000/api
  http://app.example.com:3001

I did verify by logging into the server and verifying the ENV variables existed:

echo $API_ROOT
echo $REACT_APP_API_ROOT

What am I doing wrong in terms of getting the values from ENV variables?

facebook.github.io/create-react-app/docs/…

SakoBu
– SakoBu

2019-01-11 03:38:46 +00:00
Commented Jan 11, 2019 at 3:38 — SakoBu
– SakoBu, Commented Jan 11, 2019 at 3:38

Hai Pham · Accepted Answer · 2019-01-11 04:06:47Z

2

process.env is a global Object provided by your environment through NodeJs. Because we don't have NodeJS in browser, it won't understand process.env.API_ROOT. You init your app using react-create-app with webpack included by default, so I recommend you to use .env file to set environment variables by using dotenv.

Note: dotenv is included in create-react-app v0.2.3 and higher

Create .env file include

API_ROOT=http://dev.example.com/api
APP_ROOT=http://app.example.com
REACT_APP_API_ROOT=http://www.example.com:3002/api
REACT_APP_APP_ROOT=http://app.example.com:3002

Config webpack:

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)
    ]
  };

Reference:

Hope this will help.

edited Jan 11, 2019 at 4:06

answered Jan 11, 2019 at 3:33

Hai Pham

2,23513 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blankman Over a year ago

when I run yarn run build will that use the node env = production? I want to have DEV and PROD environment variables to be different.

Hai Pham Over a year ago

You can create 2 different files: .env (contains all the environment variables for production), .env.development (contains all the environment variables for development). It's easy to use, please take a look at the Reference in my answer for more details.

Hai Pham Over a year ago

@Blankman I have updated my answer, dotenv is included in create-react-app v0.2.3 and higher, document goes here: facebook.github.io/create-react-app/docs/…

Collectives™ on Stack Overflow

Loading values from environment variables in my React application not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related