React, different env files with create-react-app

Question

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?

Answer 1

Here are the env files you can use and their priority (available with [email protected] 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:

1. Create your .env, or .env.production file... in the root directory of the project, same folder as where package.json is.

2. You define your environment variable with the prefix REACT_APP_ within those env files, like so:

REACT_APP_API_KEY=343535345235452452

3. And you use them in your code this way :

• 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"
},

Answer 2

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.