React-redux-starter-kit: How do you define and access environment variables?

[dfalling]

I need a place to store my backend's host, port, API key, etc. Issues 451 and 437 suggest adding these to config.globals, but I'm not sure what to do with them from there. How do I access these values inside one of my modules? Thanks!

[davezuko]

They are exposed as global variables, so if you have a global of, say, API_HOST, you can simply reference it as you would any other variable:

// in some module:
const api = `${API_HOST}:${API_PORT}`

The config.globals object is passed to https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin, if that helps: https://github.com/davezuko/react-redux-starter-kit/blob/master/build/webpack.config.js#L48

[davezuko]

Also, just to be pedantic and 100% clear, globals are not actually exposed as global variables on window, for example. Webpack simply looks for references to those globals in your modules and replaces them with the value you defined. This is why dead code removal works, since if you have a globally defined (via webpack) __DEV__ variable (as this repo does), then the following:

if (__DEV__) {
  debug('something')
}

gets transformed to (pretending we're in production):

if (false) {
  debug('something')
}

which allows UglifyJS to completely omit that block since it will always evaluate to false.

[dfalling]

Nice, this is a lot simpler than I expected. Thanks for the thorough explanation- it's a huge help!

[agoransson]

Building on this question, I've tried to add global variables that depend on the deployment environment. So I added a variable in each of the _development.js and _production.js files. And also added the global variable. However, it refuses to override depending on the deployment.

_development.js

export default (config) => ({
  ...
  my_api   : 'localhost:8080'
})

_production.js

export default () => ({
  ...
  my_api   : 'www.myapi.com:8080'
})

And then in globals I've added the new global variable trying to read from the config variable.

_base.js

config.globals = {
  ...
  '__MY_API__' : JSON.stringify(config.my_api)
}

But this doesn't seem to work, if I give a default value in _base.js that value will always be the value of the global variable - if I remove the default in _base.js then the global variable is undefined.

[agoransson]

Answering my own question by reading #437 again...

.eslinrc

"globals" : {
  ...
  "__MY_API__" : true
},

_base.js

const config = {
  my_api   : 'default:8080',
  ...
}

config.globals = {
  ...
  '__MY_API__' : JSON.stringify(config.my_api)
}

_production.js

export default (config) => ({
  ...
  globals: {
    ...config.globals,
    '__MY_API__' : JSON.stringify('www.myapi.com:8080')
  }
})

_development.js

export default (config) => ({
  ...
  globals: {
    ...config.globals,
    '__MY_API__' : JSON.stringify('localhost:8080')
  }
})