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?

This medium article might be worth for you to look at: dev.to/rajeshroyal/… — Awshaf Ishtiaque
– Awshaf Ishtiaque, Commented Jun 20, 2023 at 11:51

Youssouf Oumar · Accepted Answer · 2023-06-20 12:05:24Z

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

And you use them in your code this way :

In a JavaScript file:
process.env.REACT_APP_API_KEY
In an 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"
},

Mihir Shah · Accepted Answer · 2022-05-17 08:57:47Z

1

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.

answered May 17, 2022 at 8:57

Mihir Shah

5083 silver badges9 bronze badges

Collectives™ on Stack Overflow

React, different env files with create-react-app

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related