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

score 26 · Answer 1 · answered Oct 17 '19 at 11:27

26

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

answered Oct 17 '19 at 11:27

Joee

1,834
18
19

Thanks @Joee but Yahiya recommend that and nothing. Does this work at all if the project isnt a create-react-app bootstrap? – Ash Hogarth Oct 17 '19 at 12:17
@Ash Hogarth - Yes it should work since env-cmd is separate library it doesn't have any dependencies on create-react-app. In face create-react-app is a boilerplate code so if some library work on it will surely work on non create-react-app project too. Hope you got my point. Thanks. – Joee Oct 18 '19 at 05:32
Hot dang, I'll keep plugging away! Thanks for your help though so far dude – Ash Hogarth Oct 19 '19 at 12:50
@Ash Hogarth - Thanks – Joee Oct 21 '19 at 06:32
@AshHogarth that is fine as you defined the scripts in the package.json and it is also fine as you defined the Joe variables in the .env-cmdrc, but to run the app it would be executed with this command, in your case applying to the .env-cmdrc what samples would be: npm run dev-server – R3ing Apr 14 '20 at 13:06
1

I don't believe this, I spent many hours trying to solve this. Why!!! Create React App has that restriction: all environment variables must have prefix REACT_APP_ ??? Can anyone explain this, I've deployed my stack MERN application with docker compose and I've been believed that the error was in my docker-compose or dockerfile but not. The problem is: prefix all your env variables with REACT_APP_ – Daniel Rch. Oct 08 '21 at 22:14

score 5 · Answer 2 · answered Dec 01 '20 at 20:16

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/

I was getting an error that env-cmd is not recognized ... it seems env-cmd is a seperate library that we need to install.... https://www.npmjs.com/package/env-cmd — ATHER, Dec 04 '20 at 01:05
@ATHER `env-cmd` is not required for the base environment file. `react-scripts` @0.2.3 and higher use `dotenv` under the hood. I'm just additionally using `env-cmd`, `node-sass-chokidar`, and `npm-run-all` in my build process. Check out this answer for more details on `react-scripts` and `dontenv`. https://stackoverflow.com/questions/42182577/is-it-possible-to-use-dotenv-in-a-react-project#answer-56668716 — WebWanderer, Dec 04 '20 at 05:21
my .env file was in the /src directory but moving it to the main source code directory solved the problem thanks — Ahmed Hosny, Jan 06 '22 at 07:48

Yahiya · Answer 3 · 2019-10-16T11:59:54.247

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

edited Oct 16 '19 at 11:59

answered Oct 16 '19 at 11:54

Yahiya

761
4
15

1

Still nothing :( – Ash Hogarth Oct 16 '19 at 11:56
clear cache before rerunning the project **npm cache clean --force** – Yahiya Oct 16 '19 at 11:58
You have to give it the -e flag when using an env-cmdrc file according to the env-cmd docs. Tried it without and get an 'unable to locate env file' error – Ash Hogarth Oct 16 '19 at 12:14
is the react app prefix part of create react app? is that something seperate to regular react? That may be a silly question – Ash Hogarth Oct 16 '19 at 12:21
@AshHogarth I think so. I am a newbie to react. you can refer here https://create-react-app.dev/docs/adding-custom-environment-variables/ . – Yahiya Oct 16 '19 at 13:01

score 2 · Accepted Answer · answered Jul 23 '20 at 16:10

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

score 0 · Answer 5 · answered Jul 14 '23 at 04:17

With ReactJS 18.2.0 using env-cmd library,

For more complex projects, a .env-cmdrc file can be defined in the root directory and supports as many environments as you want. Simply use the -e flag and provide which environments you wish to use from the .env-cmdrc file. Using multiple environment names will merge the environment variables together.

In simple, if you want the all environment declaration with similar variable keys in one file, like development, dev1, staging, test, qa, test, production, etc., so if you use REACT_APP_API_URL so based on the environment, it would serve you the value.

Using env-cmd 10.1.0 library (which has been not updated since 3 years as on date, but popular) could achieve using .rc file OR .env-cmdrc

I've used using .env-cmdrc (I've not used like .env-cmdrc.json) putting inside the project root directory, means parallel to package.json file.

Now let's deep inside the .env-cmdrc

{
  "development": {
    "README": "Variable Keys starting with REACT_APP_* will be visible to process.env with ReactJS 18 Scripts, like this README will not get reflect there inside app after process.env, because it won't started with REACT_APP, this is the way because project got started from create-react-app, hence this is the reason.",
    "REACT_APP_ENV": "development",
    "REACT_APP_URL": "http://localhost:3000/",
    "REACT_APP_API_URL": "https://something-a.onrender.com/thedb"
  },
  "test": {
    "REACT_APP_ENV": "test",
    "REACT_APP_URL": "http://localhost:3000/",
    "REACT_APP_API_URL": "https://something-a.onrender.com/thedb"
  },
  "production": {
    "REACT_APP_ENV": "production",
    "REACT_APP_URL": "https://somethingdb.netlify.app/",
    "REACT_APP_API_URL": "https://something-a.onrender.com/thedb"
  }
}

Note: Variable Keys starting with REACT_APP_* will be visible to process.env with ReactJS 18 Scripts, like this README will not get reflect there inside app after process.env, because it won't started with REACT_APP, this is the way because project got started from create-react-app, hence this is the reason.

Now, let's move to package.json file.

"scripts": {
    "start": "env-cmd --environments development react-scripts start",
    "build": "env-cmd --environments production react-scripts build",
    "test": "env-cmd --environments test react-scripts test",
    "eject": "react-scripts eject"
},

Now, if somewhere I want to get value variable key REACT_APP_API_URL based on whatever environment, simply use process.env.REACT_APP_API_URL

the trick is that every variable must starts with REACT_APP and to start the project in development, I write in vscode terminal npm start

I hope it would clear many of the peoples doubt & issue.

Env-cmd environment variables in React

5 Answers5