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

Answer 1

2020 solution: use publicRuntimeConfig and serverRuntimeConfig. More here: https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

Answer 2

The error is in how you name things. If you would name staging "reptile" for instance, it wouldn't matter anymore if it connects to the reptile-api which is now the prod container.

Answer 3

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';

Answer 4

There might be situations where you need env vars during build time for different environments further downstream the pipeline. A setup like this for example:

Test |--> Prd Europe
     |--> Prd USA

Say, for SEO reasons, you want to have a different title for USA by using the env vars and it should be immediately available in the template, not after some miliseconds. This is in a pipeline not possible since the slug is built at test where only a single tenant can be served, and async loading is too slow. Some crawler may pick the placeholder title instead for example.

A workaround for this, besides not using a pipeline altogether, could be to generate multiple templates per environment (at build time). In this case two templates europe.html and usa.html. Then serve them based on the env vars at runtime by a web server. So if REGION === 'USA', serve usa.html with the env vars baked in at the test env.