React: Use environment variables

Question

How can I use environment variables defined in .bash_profile in a React application? I have two React apps in production (they're the same project, so they have the same code), but they need to request to different API hosts, and I figured env variables could do the trick.

Answer 1

Use webpack.DefinePlugin. Say you exported FOO and BAR in your .bash_profile, then your webpackconfig should look like:

const config = {
  entry: 'somescript',
  // ...
  module: {
    // ...
  },
  // ...
  plugins: [
    // ... your plugins
    new webpack.DefinePlugin({
      'process.env':{
        'FOO': process.env.FOO,
        'BAR': process.env.BAR
      }
    })
  ],
  // ...
}

You will be able to access those in your js at compile time via process.env.FOO & process.env.BAR

Resource: https://github.com/topheman/webpack-babel-starter