How to use Heroku Environment Variables in React with Webpack

Our team was working on a legacy project that used Webpack in a React app. When we first built it, the application had trouble retrieving our Heroku environment variables. So we (okay, I) had taken a shortcut and just hard-coded environment variables into the various Webpack files.

For example, here’s a snippet from webpack.prod.js:

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('https://www.ourcoolapp.com/api/v1'),
    'VIDEO_HELP_URL': JSON.stringify('https://www.youtube.com/watch?v=JKx_BTj_-IE')
  }
})

Obviously this was not a good long-term solution, as it would require a code deployment any time an environment variable needed to be changed. As a general rule, a configuration change should not require a deployment.

When it was time to add a new variable, we decided to clean up the mess. The fix to have Heroku read the environment variables was actually quite simple: declare the variable, then wrap process.env.VARIABLE with JSON.stringify.

Here’s the new snippet:

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

One bit of technical debt knocked out nice and quick.

As an aside, there are some pretty strong opinions about Webpack out there. Here’s a funny thread on the topic.