How to use environment variables with webpack+reactjs?

Question

I am compiling my Reactjs files using webpack. In my project I need to make API calls to the backend.

Now I have 3 environments which would local, development and production.

So i have a constants.jsx file in which I have declared following:-

export const url= 'http://localhost:8002/api/v0';

So in my components I import the url from above and use them to call APIS, but how I need to change above variable based on whether it is local, dev or prod.

How do I implement above?

See stackoverflow.com/questions/30030031/… for how to pass variables in webpack.config.js. — Dennis Shtatnov
– Dennis Shtatnov, Commented Jul 3, 2016 at 18:15

ssuperczynski · Accepted Answer · 2022-02-07 12:06:37Z

9

So I was trying few things and solved the above by doing following:

In a Webpack config add a DefinePlugin. Following is my webconfig:

plugins: [
  new BundleTracker({filename: './webpack-stats.json'}),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.environment),
    }
  })
],

Now while compiling we use the following commands:

environment=local webpack (for local)
environment=development webpack(for dev)
environment=production webpack(for prod)

Now if you see we set 'NODE_ENV' with the cli input so when 'NODE_ENV' is production as value, the webpack automatically minifies your output bundle.

Now say we have API url declared in a file(I had Constants.jsx), so we add following to constants.jsx. We can read the NODE_ENV set in webpack config in this Constants.jsx and import them in your components from where APIS are called by exporting it from here.

const api_url = function () {
  let api_url = '';
  if (process.env.NODE_ENV == 'local') {
    api_url = 'http://localhost:8002/api/v0';
  } else if (process.env.NODE_ENV == 'development') {
    api_url = 'https://development/api/v0';
  } else if (process.env.NODE_ENV == 'production') {
    api_url = 'https://production/api/v0';
  }
  return api_url;
}

export const url = api_url();

edited Feb 7, 2022 at 12:06

ssuperczynski

3,4463 gold badges46 silver badges64 bronze badges

answered Jul 4, 2016 at 16:49

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

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

4 Comments

Capuchin Over a year ago

const api_url function seems a bit verbose? can you do this in any other way?

Harkirat Saluja Over a year ago

verbose? can you be a bit more elaborate?

Capuchin Over a year ago

Compare this for example with: stackoverflow.com/questions/38164102/…

Shrikant Dande Over a year ago

"scripts": { "build": "cross-env NODE_ENV=development webpack" this is my build script for dev , Can you tell how to run different script for different env. I am running it throuh maven pom.xml

Collectives™ on Stack Overflow

How to use environment variables with webpack+reactjs?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related