I've recently deployed a React/Express app to Heroku, but I'm having an issue with environment variables that are part of the built app and the Heroku deployment pipeline - in a nutshell, the values of environment variables from the app's staging release are being carried over when promoting to production - the only way that I can get the environment variables to set correctly is to push the app directly to production, which really defeats the purpose of the deployment pipeline in the first place. Here's a summary of the scenario:
The environment variable in question is API_URL, which is referenced in webpack.config.js like so:
plugins: [
new webpack.DefinePlugin({
'API_URL': JSON.stringify(process.env.API_URL || 'http://localhost:4000/api/v1')
})
]
The API is itself another Heroku app with staging and production releases, and so the values of the API_URL environment variable are set in my React app Heroku configuration as https://staging-api-12345.herokuapp.com/api/v1 and https://production-api-12345.herokuapp.com/api/v1, respectively.
When I push my React app up to staging, it works perfectly - however, when I promote the app to production and make the first call to the API, it is still pointing to https://staging-api-12345.herokuapp.com/api/v1. Ok well, I understand why that is the case - the app was built when being pushed to staging... so I tried rebuilding the app after promoting to production, but that did not work, it still used the staging environment variables.
When using the Heroku deployment pipeline, is there a way to force the app slug to rebuild so that it will catch the different environment variables?