CODEWITHSUNDEEP
javascriptnode.jsreactjsenvironment-variablesnext.js
APixel Visuals
APixel Visuals

Reputation: 1648

React - Env variables in development AND production

As I've read here, React does support environment variables as long as they are prefixed with REACT_APP_. However, I need them in development and production. How can I get this support?

Note: I'm using Next.js

Upvotes: 1

Views: 1686

Answers (1)

Rob B
Rob B

Reputation: 305

I'm sure this has been answered before, but it says it right on what you linked. Create 2 files, .env.development and .env.production in the root of your project (same level as package.json, .gitignore, etc). Whichever script you run determines which one gets used, in accordance with the hierarchy listed below.

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


Files on the left have more priority than files on the right:

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)

Upvotes: 3

Related Questions