React-redux-universal-hot-example: Access ENV vars in client-side code

[bdsabian]

First of all, awesome project! I was able to get up and running easily including deploying to Heroku.

What I'm trying to figure out now is how to access environment variables in the client-side code. For one, I'd like to be able to set api host via environment variables rather than having it hardcoded, but this would be useful in general.

Seems like I could add additional variables in Html.js, but not sure if that's the best way to go. Anyone have experience with this? Is there a way to do this already with the code in this repo or any other advice/suggestions?

Thanks

[erikras]

I would think that the only way would be to pass them like the redux store is getting passed. Obviously you'd want to select specific ones to share, lest you publish your database password or something. :smile:

[bdsabian]

Right, thought that might be the case. Thanks @erikras!

[quicksnap]

The webpack DefinePlugin can just inject your ENV variables into your code at compile time: https://webpack.github.io/docs/list-of-plugins.html#defineplugin

[erikras]

:arrow_up: Yes, I forgot about that. Better answer than mine.

[bdsabian]

Even better! Thanks @quicksnap!

[bernharduw]

The webpack DefinePlugincan only set the ENV variables statically at build time. So @erikras' suggestion is more dynamic: Use serialize() in src/Helpers/Html.js to transfer specific host settings parsed dynamically from process.ENV.