create react app not picking up .env files?
ReactjsCreate React-AppReactjs Problem Overview
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
Reactjs Solutions
Solution 1 - Reactjs
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
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
Solution 2 - Reactjs
Make sure your .env file is in the root directory, not inside src folder.
Solution 3 - Reactjs
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
Solution 4 - Reactjs
If you want to use multiple environment like .env.development
.env.production
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
Solution 5 - Reactjs
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'
Solution 6 - Reactjs
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.
Solution 7 - Reactjs
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
Solution 8 - Reactjs
For this purpose there is [env-cmd][1] 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. [1]: https://www.npmjs.com/package/env-cmd
Solution 9 - Reactjs
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.
Solution 10 - Reactjs
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.
Solution 11 - Reactjs
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.
Solution 12 - Reactjs
when you get undefined
from the environment file then just stop the terminal and restarts with npm start
command.
Solution 13 - Reactjs
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
Solution 14 - Reactjs
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.
Solution 15 - Reactjs
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.
Solution 16 - Reactjs
After you add .env
file, you need to
- restart your application
- kill the server
- run
npm start
again
And it should work
Solution 17 - Reactjs
I forget to add process.env.
It looks like this
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
Solution 18 - Reactjs
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.
Solution 19 - Reactjs
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 :)
Solution 20 - Reactjs
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"
}
Solution 21 - Reactjs
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)