React-boilerplate: Ways to deal with environment variables

[joehua87]

First of all, thank you for your awesome project,
Given our app have interaction with an external api (for example, https://my-api.com/posts)
In favor of http://12factor.net/config, we should start our apps like this:

API_HOST=https://my-api.com/posts npm start:prod

Currently my workaround solution is:

• Read the API_HOST & manually pass it into webpack like this

new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
        API_HOST: JSON.stringify(process.env.API_HOST),
      }
    }),

• Then I store it in config file, or pass it into store

Does we have any better method to deal properly with this issue? about security? DRY?

[datapimp]

I use a combination of dotenv and https://github.com/ArikMaor/extended-define-webpack-plugin

I usually have a separate place for defining the environment variables I want to expose, and require that inside of the webpack configuration, just so that I don't have to duplicate that stuff or maintain it inside of the webpack config

The extended define makes it cleaner overall to include not only public credentials and hostname values like you do, but other kinds of feature flags which can be toggled on and off through the environment variables

[mxstbr]

Thanks for the great answer @datapimp!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.