Adding an .env file to React Project not working

Question

I am trying to add .env file and variables but I am unable to access any variable. I am using React Biolerplate Code.

I am following this React Docs File.

I have added one .env file in my root folder like this:

REACT_APP_SECRET_NAME=secretvaluehere123

And I am trying to access this using this code:

<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>

I am getting NODE_ENV as development but when I am trying to access:

 REACT_APP_SECRET_NAME 

I can't access it.

Mine react boilerplate is using:

cross-env  NODE_ENV=development 

in the start command.

I removed (cross-env NODE_ENV=development) from package.json but it is not working. I tried solutions from this answer: Possible answer.

According to React Docs it should work. I want to add api_url for local it should be x and for the production, it should be y:

Answer 1

The following issue from React Boilerplate seems to suggest a working solution:

1. Install env-cmd, a node module
2. Update your start script to use it:

  {
    start: "cross-env NODE_ENV=development env-cmd node server"
  }

This should work if your .env is in the root folder as you've said. Otherwise, you can specify the path of .env by doing so

  {
    start: "cross-env NODE_ENV=development env-cmd -f ./custom/path/.env node server"
  }