process.env on Client-Side ReactJS

Question

I understand that process.env only work on server-side, I want to use the same concept but in client side because my app is deployed on aws s3, I know that we can put a variable in process.env from webpack how I can do the same but in client side?

Answer 1

You can use webpack.DefinePlugin to put variables in process.env. Below, most common example with React:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': '"production"'
    }
  })
]

isn't it enough?

---

I've created this example to prove that it works:

// webpack.config.js
const webpack = require('webpack');

module.exports = {
    entry: './index.js',
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': '"production"'
            }
        })
    ]
};

// index.js
console.log(process.env);

console.log(process.env.NODE_ENV);

and the output file of this configuration is like this:

// ... some internal webpack init function ... 
([function(e,n){console.log(Object({NODE_ENV:"production"})),console.log("production")}]);    

so as you may notice, values are replaced correctly.

If you need this variable you can do some initialization like:

global.myVar = process.env.NODE_ENV;

or something like this.