I am trying to set up different environment files in a React project (using create-react-app). I following the official documentation but I am getting an error:
'.env.development' is not recognized as an internal or external command,
I have .env, .env.local, .env.development, .env.production in the same level as package.json and src/
My scripts in package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Also tried other option: "start": ".env.local, .env.development, .env".
Both return similar errors as referenced above when I run npm start.
All my keys start with the prefix: REACT_APP_. Ex: REACT_APP_API_KEY.
What am I missing?
I think you have to use the env-cmd package to use multiple env. Which is the best way to handle it. Just follow this doc for more info Multiple env example for react and env-Cmd package details
Also, please check which react/react-scripts version you are using in your project and check the version of react/react-scripts that you have created for a demo which working fine for you.
Here are the env files you can use and their priority (available with react-scripts@1.0.0 and higher):
.env: Default.
.env.local: Local overrides. This file is loaded for all environments except test.
.env.development,.env.test,.env.production: Environment-specific settings.
.env.development.local,.env.test.local,.env.production.local: Local overrides of environment-specific settings..
Which means, an environnement variable for production goes in .env.production file, etc. And here are the steps to follow:
Create your .env, or .env.production file... in the root directory of the project, same folder as where package.json is.
You define your environment variable with the prefix REACT_APP_ within those env files, like so:
REACT_APP_API_KEY=343535345235452452
- In a JavaScript file:
process.env.REACT_APP_API_KEY
- In a HTML file:
<title>%REACT_APP_API_KEY%</title>
Though if you wanna set an environment variable within the scripts, you could do it like so:
"scripts": {
"start": "REACT_APP_API_KEY=343535345235452452 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},