Heroku pipeline - staging env variable carried into production

Question

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?

Answer 1

You cannot rebuild the slug, the main point of pipelines is to move the same slug between apps.

What you need to do is to fetch API_URL at runtime and not during build process. You can put all envs in one file, for example env.js

export const API_URL = process.env.API_URL;
export const OTHER_VAR = process.env.OTHER_VAR;

And then just import what you need in other files

import { API_URL, OTHER_VAR } from 'env.js';