Env-cmd environment variables in React

Question

I seem to have tried every which way variation of the env-cmd command but cannot work out why I can't access the variables

I originally followed this tutorial https://www.youtube.com/watch?v=3SH5AQsHypA

but the docs have since changed and so you need to use the command -e unlike the video so my package.json command reads...

"dev-server": "env-cmd -e dev webpack-dev-server",

any my .env-cmdrc reads...

{
    "dev" : {
        "BASE_URL" : "development"
    },
    "qa" : {
        "BASE_URL" : "qa"
    },
    "prod" : {
        "BASE_URL" : "prod"
    }
}

But I just cannot access process.env.BASE_URL for some reason. Any help is greatly appreciated

Answer 1

The Create React App documentation states that you must prefix all environment variables within your .env files with REACT_APP_ for them to be available from within your code process.env.REACT_APP_.

Try

REACT_APP_BASE_URL

instead of BASE_URL

Answer 2

You need to prefix your environment variables with REACT_APP_, otheriwise, the variables will be ignored to avoid collision.

The documentation says to place your .env file in the root directory (/src) yet I managed to get away with /src/environments/.env.local as well as .env.staging and .env.production.

I am using env-cmd, and my commands are like such:

  "scripts": {
    "start": "env-cmd -f ./environments/.env.staging npm-run-all -p watch-css start-js",
    "start:naked": "npm-run-all -p watch-css start-js",
    "start:local": "env-cmd -f ./environments/.env.local yarn start:naked",
    "start:staging": "env-cmd -f ./environments/.env.staging yarn start:naked",
    "start:production": "env-cmd -f ./environments/.env.production yarn start:naked",
    "start-js": "react-scripts start",
    "build": "npm run build-css && react-scripts build",
    "build:staging": "env-cmd -f ./environments/.env.staging npm run build",
    "build:prod": "env-cmd -f ./environments/.env.production npm run build",
    "build-css": "node-sass-chokidar src -o dist/styles",
    "watch-css": "npm run build-css && node-sass-chokidar src -o dist/styles --watch",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

http://create-react-app.dev/docs/adding-custom-environment-variables/

Answer 3

package.json

"dev-server": "env-cmd dev webpack-dev-server",

add a prefix like

REACT_APP_

{ 
  "dev" : 
      { "REACT_APP_BASE_URL" : "development" }, 
  "qa" : 
      { "REACT_APP_BASE_URL" : "qa" }, 
  "prod" : 
      { "REACT_APP_BASE_URL" : "prod" } 
}

rerun the project and call it using

process.env.REACT_APP_BASE_URL

Answer 4

For anyone interested this far along. This was actually solved in the end by using the Dotenv-webpack library

https://www.npmjs.com/package/dotenv-webpack

in your webpack config file;

const Dotenv = require('dotenv-webpack');

pass the parameter of env to module.exports

module.exports = (env) => {
 let ENV_CONFIG;

 if(env === 'dev'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-dev'})
 }

 if(env === 'staging'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-staging'})
 }

 if(env === 'production'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-production'})
 }
}

then in plugins...

plugins : [
    ENV_CONFIG
]

your package.json script may then look something like..

"build:prod": "webpack -p --env production"

You should then be able to access your variables under process.env like so;

process.env.SERVER_URL