question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

REACT_APP_X env variable does not show up on front-end as process.env.REACT_APP_X

See original GitHub issue

I have this start script in package.json

"start-dev": "REACT_APP_SECRET_CODE=development && react-scripts start",

on the front-end, I execute this

console.log(' => Process env => ',process.env);

It appears that process.env on the front-end is an empty object, but according to the docs I should expect this:

{
REACT_APP_SECRET_CODE:'development'
}

what am I doing wrong?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

8reactions
gaearoncommented, Dec 13, 2016

I created a new project and put

console.log(process.env);

in it.

I am seeing an object being printed:

screen shot 2016-12-13 at 23 02 18

Next, let’s try a custom variable. The way you specify environment variables is incorrect.

The User Guide section I referred you to earlier also shows how to do it:

Linux, OS X (Bash)

REACT_APP_SECRET_CODE=abcdef npm start

Note it’s REACT_APP_SECRET_CODE=abcdef npm start and not REACT_APP_SECRET_CODE=abcdef && npm start. There is no && there.

If I remove && from your example then the logged object looks like this:

screen shot 2016-12-13 at 23 05 25

As you can see the environment variable is now available. However if all you want is to tell if the app is running in production, process.env.NODE_ENV is enough. You don’t need to pass anything else.

I hope this helps!

1reaction
ORESoftwarecommented, Dec 13, 2016

Np, I can figure it out, it may be that the project I am working on was modified so that the env variables no longer get sent to the front-end via the HTML. thanks for your help, at least I know absolutely what the expected behavior is. I will start from a new app and figure it out

Read more comments on GitHub >

github_iconTop Results From Across the Web

create react app not picking up .env files?
Had this same problem! The solution was to close the connection to my node server (you can do this with ...
Read more >
Can't Read Environment Variable In React?
The second thing to remember is that, for security reasons, create-react-app does not allow you to define Environment Variables that do not start...
Read more >
Using environment variables in React | by Sam Pakvis - Medium
Your front-end code will refer to the same environment variable ( process.env.API_URL ) on both environments (development/production), but because you defined ...
Read more >
Adding Custom Environment Variables
You can read it from process.env.NODE_ENV . When you run npm start , it is always equal to 'development' , when you run...
Read more >
React - Access Environment Variables from dotenv (.env)
React apps built with Create React App support dotenv environment variables out of the box, so all you need to do is add...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found