Loading values from environment variables in my React application not working - reactjs

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?

Answer 1

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:
https://medium.com/#trekinbami/using-environment-variables-in-react-6b0a99d83cf5
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
Hope this will help.