4

We have static react site deployed with Heroku pipelines.

The code is pushed and build automatically on Stage. For pushing to Production, we would like to use the Heroku promote function, so we are sure we use the same build we tested on stage.

Stage and Production have different APIs we would like to configure via Heroku's environment vars.

During the npm run build on Stage const apiUrl = process.env.API_URL is replaced during with const apiUrl = "https://stage-api.example.com"

Unfortunately (but of course), after promoting to Production the apiUrl is still the one from Stage.

Also, a hack with the release phase does not work, because filesystem changes during the release phase will not be deployed.

Is there a way to use Heroku's promote function with a static build together with Environment variables (I know we could do a rebuild per stage or load a config based on the domain)?

Any good practices to deploy a static site with Heroku pipelines?

maersu
  • 3,242
  • 22
  • 27

1 Answers1

0

You need to have const apiUrl = process.env.API_URL run during runtime, not injected on build. I use the promote function w/in heroku and have the app just grab that variable if process.env.NODE_ENV === 'production'

Jake Luby
  • 1,718
  • 5
  • 16
  • Thanks! Maybe I get your answer wrong: But there is no runtime in a static website (it's not a node or express powered site) just a static react app build (HTML&JS). Afaik the browser has not access to `process.env`. – maersu Aug 12 '19 at 20:11
  • 3
    Sorry about that! Heroku serves up your site via node. What you'll need to do is create an express app that serves up your web page and acts as an API proxy for the API calls. Heroku will then serve up your express app which now has access to that variable. Otherwise you'll need to have a separate build. – Jake Luby Aug 12 '19 at 20:19