Setting up React environment variables for dev and local

Question

I am new to react and setting up environment variables for my project. Here is what I did..

added .env-cmdrc.json as follows

{
 "development":{
 "REACT_APP_BASE_URL": "https://servername:port/"
 },
 "staging":{
 "REACT_APP_BASE_URL": "http://servername:port/"
 },
  "local":{
  "REACT_APP_BASE_URL": "http://localhost:port/"
  }
 }

installed npm

npm install env-cmd or npm install -g env-cmd

edited package.json as follows:

 "start:development": "env-cmd -e development react-scripts start",
 "start:staging": "env-cmd -e staging react-scripts start",
 "start:local": "env-cmd -e local react-scripts start",
 "build:development": "env-cmd -e development react-scripts build",
 "build:staging": "env-cmd -e staging react-scripts build",

tried - npm run start:development

was giving me env-cmd error
again ran

npm install env-cmd
Now tried - npm run start:development

Failed to find .rc file at default paths: [./.env-cmdrc,./.env-cmdrc.js,./.env-cmdrc.json] at getRCFile

I am doing it first time and would appreciate any help..what am I missing here..

Zotille · Accepted Answer · 2022-02-10 07:33:46Z

2

I tried your code, but it works well.
Check your code, ensure the location of your config file .env-cmdrc.json, it should be placed under root dict of your project (the same level with package.json)

answered Feb 10, 2022 at 7:33

Zotille

1238 bronze badges

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

Comments

iamalinski · Accepted Answer · 2022-02-10 06:50:17Z

0

I would suggest using dotenv package instead of env-cmd.

install the package - npm i dotenv
Create a environment file in your root directory - .env
Declare a variable - REACT_APP_URL=http://localhost/....
Use the variable - process.env.REACT_APP_URL

In order to start the React application you need to check your package.json file and make sure it contains something like this:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

If that's in place you can run the following command: npm start

Now you can start coding :)

answered Feb 10, 2022 at 6:50

iamalinski

3751 gold badge6 silver badges18 bronze badges

2 Comments

J. Gwinner Over a year ago

How does that switch to staging and production? It looks like this sets to localhost.

iamalinski Over a year ago

@J.Gwinner you can manually switch to production by changing the REACT_APP_URL or you can automate that with a bash script.

Collectives™ on Stack Overflow

Setting up React environment variables for dev and local

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related