React env variables with .env

Question

I'm trying to follow docs on adding env variables from react-create-app without success:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

inside root of the document I have a ".env" file (default .env properties)
.env file contains only one variable 'REACT_APP_API_HOST=http://localhost:8080'
trying to access process.env inside my app (created with create react app) gives me undefined

This is app.js where I'm trying to access process.env without success.

I can't access process.env inside the code. Is there any working example on how to do it?

Ah weird! Are you able to access any other variable using process.env by exporting it in bash profile? — Rohan Rayarikar
– Rohan Rayarikar, Commented Jun 6, 2017 at 12:08
After you add new .env variable, make sure to restart yarn. Also, your custom .env variables should start with REACT_APP_ — Rokas
– Rokas, Commented Jun 6, 2017 at 12:34

Hossein · Accepted Answer · 2017-10-02 20:36:29Z

16

You can use .env file on root.

start: react-scripts start - uses .env.development
build_staging: "set REACT_APP_ENV=staging & react-scripts build" - uses .env.staging
build: "react-scripts build" - uses .env.production

answered Oct 2, 2017 at 20:36

Hossein

4,6872 gold badges37 silver badges44 bronze badges

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

Comments

john-d-pelingo · Accepted Answer · 2017-06-06 13:35:03Z

2

In your package.json you will eventually have to add NODE_ENV=development at your start script. E.g. NODE_ENV=development && node scripts/start.js for the ejected create-react-app and NODE_ENV=development react-scripts start for the unejected one.

Edit: Apparently NODE_ENV=development is not required since it is already hardcoded when you run the start or build script. Per the docs your custom environment variables should have the following format REACT_APP* as you have already done.

A snippet would be helpful.

edited Jun 6, 2017 at 13:35

answered Jun 6, 2017 at 13:20

john-d-pelingo

3743 silver badges7 bronze badges

1 Comment

Ante Over a year ago

Issue was that I was trying to read it while in debug mode by watching variables. For some reason, it does not work. By simply console logging it, it works.

Collectives™ on Stack Overflow

React env variables with .env

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related