Using runtime env with React and heroku

Question

SoI have a staging and production apps on heroku.

I also use create-react-app, where the environmental variables are embedded during the build time. Since the build happens on staging and then the app is released to production, I'm having staging env vars on production.

Is there a way to get the runtime envs on production (from heroku config) without rebuild the whole app?

Answer 1

No is the short answer.

Basically when you build frontend applications they turn from a node server (in the case of create react app) into static files. This means the js-css-html is all hard baked into static files. Then when you change from staging to prod these same files will just be transferred with the "hard coded" variables from staging.

There is a messy solution to this where you write a script to find and replace your variables in the minified javascript files but this is nasty.....

A better solution would be to rebuild the frontend, I mean it doesn't take that long, with your production variables. This also gives you a chance to unit test etc before deploying to production.

I hope this helps!