diff --git a/.buildpacks b/.buildpacks index 103d8375..856f993c 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,4 @@ https://github.com/heroku/heroku-buildpack-nodejs.git -https://github.com/mars/create-react-app-inner-buildpack.git#v1.3.0 +https://github.com/mars/create-react-app-inner-buildpack.git#stateless-build +https://github.com/heroku/heroku-buildpack-mustache.git https://github.com/heroku/heroku-buildpack-static.git diff --git a/README.md b/README.md index cdbf3cba..2ece729d 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,40 @@ git commit --allow-empty -m "Set REACT_APP_HELLO config var" git push heroku master ``` +#### Runtime configuration + +🚨 Experimental using [heroku-buildpack-mustache](https://github.com/heroku/heroku-buildpack-mustache). + +Create `mustache_templates.conf` with the following content: + +``` +build/index.html +``` + +Add script element to `index.html` to capture environment variable values: + +```html + + + + +``` + +Then, use these globals within the React app. + +```javascript +const hello = react_app_env.HELLO; +``` + +Globals are normally considered dirty, so you may build up a more acceptable pattern for using these values in an app, such as: + +* create a module to read the global values and make them available via `require` +* create a [higher order component [HOC]](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) that makes the values available via props + Version compatibility ---------------------