create react app not picking up .env files?

Question

I am using create react app to bootstrap my app.

I have added two .env files .env.development and .env.production in the root.

My .env.development includes:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

When I run my app using react-scripts start and console out process.env it spits out

{ NODE_ENV: "development", PUBLIC_URL: "" }

I've tried different things, but its just not picking up the veriables in my development file, what am I doing wrong?!

Directry structure is:

/.env.development
/src/index.js

Package.json script is:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

Edit:

@jamcreencia correctly pointed out my variables should be prefixed with REACT_APP.

Edit 2

It works okay if I name the file .env but not if I use .env.development or .end.production

`process.env` is something that the back-end (Node or whatever you're using) can read. The front-end bundle has no idea what `process.env` is as it runs in the browser. You can configure webpack to pass it in the bundle when bundling, or even easier you can pass it from the back-end in the index file you're rendering as a global variable. — Raul Rene, Jan 22 '18 at 09:35
probably not the case, but i have run into this a couple of times and the problem i found is that when my computer is using a lot of memory i don't get my .env variable loaded. I use ubuntu 16.4. try loading the varible from the terminal `react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback` if you still don't see them i'd restart my system to lower memory usage and try again usually this resolves it for me. — Femi Oni, Jan 22 '18 at 09:39
@RaulRene create-react-app handles .env out of the box for you not need for further config — Femi Oni, Jan 22 '18 at 09:41
`.env ` is the file name, not the ending! Don't make the mistake of calling your file `secret.env` or similar, that won't work! — gignu, Feb 04 '23 at 18:05

score 604 · Accepted Answer · edited Nov 10 '22 at 10:43

604

With create react app, you need to prefix REACT_APP_ to the variable name. ex:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

** Make sure your .env file is in the root directory, not inside src folder.

CRA Docs on Adding Custom Environment Variables:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name

edited Nov 10 '22 at 10:43

pvrforpranavvr

2,708
2
24
34

answered Jan 22 '18 at 09:41

jamcreencia

6,474
1
11
7

11

This is vital. i missed it but yeah it won't work with the prefix – Femi Oni Jan 22 '18 at 09:46
21

This works when I use `.env` but not for `.env.development` or `.env.production` ? – shenku Jan 22 '18 at 10:33
3

@shenku Did you manage to find out why it works only with `.env` and not with `.env.development` and `env.production` – Constantin Chirila May 23 '19 at 08:38
For Devs doing front-end work, because you don’t have NodeJs in the browser, you're going to need webpack... meh – Stephane Aug 10 '19 at 15:18
3

Thank you. I have been looking for an answer for hours. – Fahmid Nov 23 '19 at 07:34
even prefix with REACT_APP_ doesn't help me. I have .env file on the root folder but it doesn't help me. – Shamim Jan 16 '21 at 14:26
14

I stopped my development server and started it again and saw that my Env variables are picked up. I have 2 files `.env` and `.env.local` in my root folder. – Subhajit Das Feb 17 '21 at 14:58
2

Vital bit of information after the change, restart the server as I had the same issue! – user1574598 Feb 22 '21 at 17:12
It works fine when I rename all the variables with the prefix **REACT_APP_** and make sure that all the variables are present in each environment file. – tushar zore Jul 27 '21 at 11:11
After several minutes of trying, I finally tried restarting my react server which works out fine. – Isaa Imam Aug 24 '21 at 10:26
Also, if you have been using .envrc in other projects, make sure *not* to include export before the environment vars - stupid thing to overlook in a copy-paste – Joseph Siefers Nov 15 '22 at 20:16
`.env ` is the file name, not the ending! Don't make the mistake of calling your file `secret.env` or similar, that won't work! – gignu Feb 04 '23 at 18:06

score 171 · Answer 2 · answered May 10 '19 at 21:47

171

Make sure your .env file is in the root directory, not inside src folder.

answered May 10 '19 at 21:47

Ryan Dhungel

3,637
4
19
26

8

Although, while reading the documentation I saw it should be in the root directory, I still managed to add my .env file in the src folder...(facepalm) Thanks for your answer. – Corné Sep 21 '20 at 10:02
I had the same problem, it didn't work when inside src folder but it worked after moving into root folder in version 3.4.3 – Vinod Kumar Oct 07 '20 at 06:08
1

yes this is the problem, thank you so much – akash maurya Jan 11 '21 at 09:23
1

This is what I was not doing. Thank you so much – Bijay Jul 05 '21 at 11:32
4

Oh my god! This should've been the first comment. Thanks a lot. – Sandeep Amarnath Jul 28 '21 at 03:16

J.S. Peterson · Answer 3 · 2019-04-21T19:19:22.547

75

Had this same problem! The solution was to close the connection to my node server (you can do this with CTRL + C). Then re-start your server with 'npm run start' and .env should work properly.

Source: Github

edited Apr 21 '19 at 19:19

answered Apr 19 '19 at 22:36

J.S. Peterson

2,839
1
14
17

2

Great, I thought I did this but didn't. Thanks, this worked! – Shannon Cole Jan 31 '22 at 19:46

Maria Jeysingh Anbu · Answer 4 · 2020-08-07T09:48:08.653

34

If you want to use multiple environment like .env.development .env.production

use dotenv-cli package

add .env.development and .env.production in project root folder

and your package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

then build according to environment like

npm run-script build-dev

edited Aug 07 '20 at 09:48

answered Apr 10 '18 at 15:19

Maria Jeysingh Anbu

3,164
3
34
55

is this `dotenv` or `dotenv-cli`? – Drazen Bjelovuk Feb 10 '20 at 22:08
6

Having different .env files for different environments is now also supported out of the box by create-react-app: [create-react-app docs](https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used). No need to use dotenv explicitly (create-react-app actually uses it behind the scenes to handle environment variables) – Marnix.hoh Apr 03 '20 at 12:58
@MariaJeysinghAnbu, that syntax belongs to `dotenv-cli`, not `dotenv`: https://www.npmjs.com/package/dotenv-cli – AMS777 Aug 05 '20 at 15:08
1

@AMS777 I'm using [dotenv](https://www.npmjs.com/package/dotenv) npm not [dotenv-cli](https://www.npmjs.com/package/dotenv-cli) – Maria Jeysingh Anbu Aug 05 '20 at 16:23
@MariaJeysinghAnbu, I wanted to use `dotenv` but got an error. I checked the documentation but didn't find that `-e` option for the command line. However I found it on the `dotenv-cli` documentation. That's why I was saying. I'm finally using `env-cmd`, not to have `dotenv` and `dotenv-cli` installed at the same time, which may lead to confusion. – AMS777 Aug 06 '20 at 08:27
@AMS777 idk that i was using this over year ago. do you want me to update the answer with dotenv-cli – Maria Jeysingh Anbu Aug 07 '20 at 07:36
@MariaJeysinghAnbu, I think a mention to it would be helpful. Thanks. – AMS777 Aug 07 '20 at 09:14

score 21 · Answer 5 · answered Oct 06 '19 at 06:34

21

I was having the same problem, but it was because I had my .env file in YAML format instead of JS.

It was

REACT_APP_API_PATH: 'https://my.api.path'

but it needed to be

REACT_APP_API_PATH = 'https://my.api.path'

answered Oct 06 '19 at 06:34

cchapman

3,269
10
50
68

Such a simple yet good spot. I had done the same and couldn't see the wood for the trees. Thanks – Andy Allison Dec 20 '19 at 10:55
Thanks for this! I was searching all day not noticing this slight error :) – chia yongkang Jan 01 '20 at 09:24
1

Thank you for posting this. It's an easy mistake to make. – Our_Benefactors Jul 23 '21 at 15:56
Ahhh I'm embarassed. +1 – tinkoh Jan 21 '22 at 19:20

score 19 · Answer 6 · answered Jan 16 '21 at 23:37

19

For people who apply all those answers above and didn't work just restart the terminal of npm start, stop the live server and run it again and it will work because it works for me

answered Jan 16 '21 at 23:37

Nassim

397
3
7

4

Worked as a charm! Thanks – Ehsan Ghasaei Mar 02 '21 at 01:34
1

Stopping the live server and restarting is a critical step. This needs to be included in the top voted answer! – Anthony Avila Jun 23 '22 at 23:15

score 16 · Answer 7 · answered May 21 '19 at 10:40

16

Regarding env-cmd. As per VMois's kind post on gitHub, env-cmd has been updated ( version 9.0.1 as of writing ), environment variables will work as follows on your React project:

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

In your package.json file.

answered May 21 '19 at 10:40

tim

3,256
3
22
13

1

Thank you so much, this comment saved me. The create-react-app documentation hasn't updated this, so I was figuring out what is wrong – PCK Aug 09 '19 at 10:38
1

You totally saved me here. I was spinning on this thing. Thank you – MDiesel Sep 18 '19 at 13:26
1

somebody give this guy a medal – Rittesh P.V Jul 02 '20 at 12:24
1

Thanks for this even in blogs they didn't give this commands properly – Nanthakumar J J Feb 08 '21 at 14:17
Thanks, you solve my main problem regarding .env – Jonny Chuck Sep 29 '22 at 02:11

score 14 · Answer 8 · answered May 27 '22 at 20:38

14

1- Make sure .env file is based your react app root directory

2- for react app you need to prefix REACT_APP_ to the variable name. ex: REACT_APP_API_URL

3- kill server and npm start again after .env file modify

answered May 27 '22 at 20:38

mehmetakkus

631
1
8
25

2

Just for anyone coming to this the prefix REACT_APP_ is very important else it wont work – Ice_mank Jul 18 '22 at 11:23
`kill server and npm start again after .env file modify` this worked for me. Thanks! – Alfrex92 Sep 22 '22 at 04:45

score 9 · Answer 9 · answered Oct 28 '18 at 08:51

9

For this purpose there is env-cmd module. Install via npm npm i env-cmd then in your package.json file in scripts section:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

In your project root you have to create two files with the same env variables but with different values:

.env.development
.env.production

Then exclude them from public. For this in your .gitignore file add two lines:

.env.development
.env.production

So this is a proper way to use different env variables for dev and prod.

answered Oct 28 '18 at 08:51

Nastro

1,719
7
21
40

try to use full path, like: ./node_modules/.bin/env-cmd – Nastro Jan 08 '19 at 15:16
but I do not recommend the approach in my answer. Now I know that react gives build in mechanic to work with .env – Nastro Jan 08 '19 at 15:17

score 8 · Answer 10 · answered Jun 15 '21 at 07:49

8

While working with .env file, be it frontend or backend.

Whenever you modify the .env file, you must restart the respective server for the changes to take effect in the application.
Hot reloading doesn't read changes from .env file.

answered Jun 15 '21 at 07:49

Firoj Siddiki

1,649
1
20
22

score 6 · Answer 11 · answered Nov 17 '21 at 06:16

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

Reference: https://create-react-app.dev/docs/adding-custom-environment-variables

that doc creates confusion.

So you actually need to put prefix REACT_APP_ within the .env to make it work.

And make sure that you restart the test/dev/prod server because the .env content change was loaded on the build stage.

score 5 · Answer 12 · answered Nov 20 '18 at 11:20

5

If the .env file works but .env.development or .env.production don't, then create an empty .env file alongside those two. I don't know why but this works for me.

answered Nov 20 '18 at 11:20

Stjepan Golemac

121
2
4

score 5 · Answer 13 · answered Apr 29 '21 at 08:06

5

when you get undefined from the environment file then just stop the terminal and restarts with npm start command.

answered Apr 29 '21 at 08:06

Nafaz M N M

1,558
2
27
41

score 4 · Answer 14 · answered Aug 08 '20 at 18:47

And remember not to have semi-colon after the API key in the env-file.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

should be

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

that was my error

score 2 · Answer 15 · answered Mar 23 '21 at 15:27

For any VS Code users, be aware that the .env.local env file is auto-sourced, but also auto-ignored from search results when you do a project wide search for MY_ENV_VAR(probably due to it being git ignored by default). This means that if you have MY_ENV_VAR= in your .env.local like me and forgot about it, it'll break things and you'll spend 15 mins being very confused.

score 2 · Answer 16 · answered Aug 05 '21 at 14:21

2

Was struggling for a good hour before I noticed my kind IDE added an import:

import * as process from "process";

just remove it and you're fine, if that's your case as well.

answered Aug 05 '21 at 14:21

Huckleberry Ogre Developer

21
1

score 2 · Answer 17 · edited Sep 22 '21 at 09:23

2

After you add .env file, you need to

restart your application
kill the server
run npm start again

And it should work

edited Sep 22 '21 at 09:23

Peter Csala

17,736
16
35
75

answered Sep 22 '21 at 08:34

Patrick Rashidi

39
6

score 1 · Answer 18 · answered Jun 29 '22 at 14:07

I had same issue that I wasn't able to access .env variable in App.js. and I had solved the problem use create correct .env file.

in my case I was copy file from different OS and use in ubuntu system so just I did "sudo touch .env" and added my variables and restart app again then it's working for me.

score 1 · Answer 19 · answered Feb 04 '23 at 18:00

1

I made the silly mistake of naming my file secret.env because that's how I always did it in Node.js. After changing the name to .env, restarting the terminal, and running npm start again, everything worked like a charm

answered Feb 04 '23 at 18:00

gignu

1,763
1
14
24

score 0 · Answer 20 · answered Apr 23 '22 at 12:54

0

I forget to add process.env.

It looks like this

const domain = process.env.REACT_APP_AUTH0_DOMAIN;

answered Apr 23 '22 at 12:54

smit agravat

223
2
9

RASEL MAHMUD · Answer 21 · 2022-05-23T21:36:23.743

0

first step:

in your .env.local file add REACT_APP_your_API_key in this way

second step:

Add your config file ${process.env.REACT_APP_Your_API_key}

the third step:

must restart your React App and then Test whether it works.

mainly, I forget the last step

edited May 23 '22 at 21:36

answered May 23 '22 at 14:10

RASEL MAHMUD

55
2
7

Do you mean `${process.env.REACT_APP_Your_API_key}` (`.` instead of `_` after `process.env`)? – ChrisGPT was on strike May 23 '22 at 20:33

score 0 · Answer 22 · answered Jun 04 '22 at 16:42

If none of the solutions above worked for you, give these potential solutions a shot:

Make sure all the import statements within the file that is requiring defined environmental variables are being imported from the local project and not some other project(VSCode wrongly autocompleted some of my import statements in this manner)
Try exiting your current Terminal instance and running the app in a new instance

score 0 · Answer 23 · edited Jun 07 '23 at 11:12

0

Follow these 3 steps:

Install dotenv

npm install dotenv --save
Add following line in your code:

require('dotenv').config()
Create a .env file in the root directory

edited Jun 07 '23 at 11:12

Asplund

2,254
1
8
19

answered Jun 07 '23 at 05:33

Baldev Rawat

1
2

score 0 · Answer 24 · answered Jul 28 '23 at 03:50

0

The environment variable starts with REACT_APP_ (this is a must when using Create React App).

answered Jul 28 '23 at 03:50

Thineshraj S

51
1
2

score -1 · Answer 25 · answered Jul 27 '21 at 15:42

-1

I didn't get any value back as well. For some reason, I thought the environment file should be dev.env, qa.env etc. Actually, it's just ".env". That's that. In case some else makes this mistake.

answered Jul 27 '21 at 15:42

user2210411

1,497
1
9
7

Gautam Arora · Answer 26 · 2021-08-06T06:31:16.433

-1

create-react does not supports hot reload feature .env files since they are not Javascript. So, when you change the env files make sure to manually start your server to see the effect of new changes.

In my case, a manual restart of the server worked fine :)

edited Aug 06 '21 at 06:31

answered Aug 05 '21 at 06:52

Gautam Arora

35
4

score -1 · Answer 27 · answered Aug 10 '21 at 23:50

What worked for me was to install env-cmd and after that in my package.JSON add the following line of code

"scripts": {
"start": "env-cmd -f .env.development react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

}

score -4 · Answer 28 · answered Nov 02 '19 at 11:55

-4

As of latest react-scripts (3.2.0) it's a simple as putting say

PORT=4000
BROWSER=none

in your .env or .env.development file (..etc) which is supposed to be in the root folder.

It will NOT work with then REACT_APP prefix (the docs are outdated I guess) and it does NOT require any extra npm packages (react-scripts already includes dotenv 6.2.0)

answered Nov 02 '19 at 11:55

Christos Tatitzikidis

131
1
4

6

This is false. https://github.com/facebook/create-react-app/blob/f875bb0c8444720f5eac1b24822e10421b9f1202/packages/react-scripts/config/env.js#L71 – sridesmet Jan 21 '20 at 12:37

create react app not picking up .env files?

28 Answers28

Linked