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 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:

this might help you https://github.com/react-boilerplate/react-boilerplate/issues/1250 — 0xAnon, Dec 27 '19 at 09:03

vidu.sh · Answer 1 · 2019-12-27T09:49:44.333

1

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

Install env-cmd, a node module
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"
  }

edited Dec 27 '19 at 09:49

answered Dec 27 '19 at 09:09

vidu.sh

537
1
3
21

Not working I am getting error: > cross-env NODE_ENV=development env-cmd .env node server spawn .env ENOENT – Nilay Singh Dec 27 '19 at 09:43
Is it possible to show your project file structure in your question? – vidu.sh Dec 27 '19 at 09:45
I've updated my answer by digging a bit more in the doc, can you check if it works now? – vidu.sh Dec 27 '19 at 09:50
It is just a react boilerplate code I am adding .env file in the root of react boilerplate. – Nilay Singh Dec 27 '19 at 09:51

score 0 · Answer 2 · answered Dec 27 '19 at 08:16

0

I assume you are trying to access your .env variables inside index.html, if so then syntax is a bit different that in render function. Try to access it like this.

%REACT_APP_SECRET_NAME%

answered Dec 27 '19 at 08:16

JSEvgeny

2,550
1
24
38

No, I am trying to access inside a component. – Nilay Singh Dec 27 '19 at 08:19
From the answer you have mentioned, did you try to install `dotenv` package and import it to your component? – JSEvgeny Dec 27 '19 at 08:21

score 0 · Answer 3 · answered Dec 27 '19 at 08:18

0

It looks like you're looking at two types of React starters:

These aren't the same. I don't know React Boilerplate, but I'm not sure if they provide the same environment variables strategy with .env files as Create React App does.

Maybe have a look at the dotenv Node package and perhaps you can add that to your project. I think (not 100% sure) that Create React App uses the same one.

answered Dec 27 '19 at 08:18

dumazy

13,857
12
66
113

In package.json they are using: ( "start": "cross-env NODE_ENV=development node server",) They are using cross-env – Nilay Singh Dec 27 '19 at 08:26

IIX · Answer 4 · 2021-09-02T18:14:31.880

0

Seems like you have everything right. Just remember to restart your development server every time you change information in your .env file.

Also, your .env file needs to be in the root directory of your react app. You can find all this information in the React Docs - Adding Development Environment Variables In .env

edited Sep 02 '21 at 18:14

answered Aug 31 '21 at 02:49

IIX

11
1
3

Adding an .env file to React Project not working

4 Answers4