set environment variable on build React.js

Question

I am trying to have a custom environment variable on build with React, by default it's set to production but I'm trying to have a custom QA build with a custom variable. Ps : Project is ejected, is there anyway I can manage to do that without messing with my webpack configs.

You can use this: new webpack.DefinePlugin({ "YOUR_VARIABLE": JSON.stringify("value of your variable") }) in your webpack config — Nicolae Maties
– Nicolae Maties, Commented Jul 8, 2020 at 15:10

jinwar · Accepted Answer · 2020-07-08 15:19:50Z

1

This is how I do it (I am using react-scripts) :

In package.json I have those scripts :

"build:prototype": "env-cmd -f ./.env.prototype npm run-script build",
"build:demo": "env-cmd -f ./.env.demo npm run-script build",
"build:local": "env-cmd -f ./.env.local npm run-script build",
"build:production": "env-cmd -f .env.production npm run-script build",

and I call them just like any other : npm run build:prototype for example

Hope it helps

Edit: of course I have those .env files at the root of the project

answered Jul 8, 2020 at 15:19

jinwar

3962 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fowad · Accepted Answer · 2020-07-08 15:28:36Z

0

Use webpack's Define Plugin

new webpack.DefinePlugin({
  "CUSTOM_VARIABLE": JSON.stringify("whatever you want to set it to")
})

And wherever you need to change certain things in your app, you can check the value of process.env.CUSTOM_VARIABLE and act according to its value. If there are only a few places that depend on this variable, this will work fine. If there are more, it might be worth looking into other approaches, such as React's Context Hook API

answered Jul 8, 2020 at 15:28

Fowad

2922 silver badges11 bronze badges

Collectives™ on Stack Overflow

set environment variable on build React.js

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