2 Commits

Author SHA1 Message Date
Mars Hall
450b131035 Remove no-longer-needed install of devDependencies (#36) 2019-07-09 09:17:46 -07:00
Mars Hall
c800477a1b 📚 using Runtime Configuration from create-react-app-buildpack 2019-04-15 15:25:01 -07:00
2 changed files with 35 additions and 4 deletions

View File

@@ -2,11 +2,16 @@
A minimal example of using a Node backend (server for API, proxy, & routing) with a [React frontend](https://github.com/facebookincubator/create-react-app).
* 📐 [Design Points](#user-content-design-points)
* 🕺 [Demo](#user-content-demo)
* 🚀 [Deploy to Heroku](#user-content-deploy-to-heroku)
* ⤵️ [Switching from create-react-app-buildpack](#user-content-switching-from-create-react-app-buildpack)
* 🎛 [Runtime Config](#user-content-runtime-config)
* 💻 [Local Development](#user-content-local-development)
To deploy a frontend-only React app, use the static-site optimized
▶️ [create-react-app-buildpack](https://github.com/mars/create-react-app-buildpack)
⤵️ [Switching from create-react-app-buildpack](#switching-from-create-react-app-buildpack)?
## Design Points
@@ -78,7 +83,33 @@ If an app was previously deployed with [create-react-app-buildpack](https://gith
git commit -m 'Migrate from create-react-app-buildpack to Node server'
git push heroku master
```
1. If the app uses [Runtime configuration](https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-runtime-configuration), then follow [Runtime config](#user-content-runtime-config) below to keep it working.
## Runtime Config
create-react-app itself supports [configuration with environment variables](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables). These compile-time variables are embedded in the bundle during the build process, and may go stale when the app slug is promoted through a pipeline or otherwise changed without a rebuild. See create-react-app-buildpack's docs for further elaboration of [compile-time vs runtime variables](https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-compile-time-vs-runtime).
[create-react-app-buildpack's runtime config](https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-runtime-configuration) makes it possible to dynamically change variables, no rebuild required. That runtime config technique may be applied to Node.js based apps such as this one.
1. Add the inner buildpack to your app, so that the `heroku/nodejs` buildpack is last:
```bash
heroku buildpacks:add -i 1 https://github.com/mars/create-react-app-inner-buildpack
# Verify that create-react-app-inner-buildpack comes before nodejs
heroku buildpacks
```
2. Set the bundle location for runtime config injection:
```bash
heroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/react-ui/build/static/js/*.js
```
3. Now, build the app with this new setup:
```bash
git commit --allow-empty -m 'Enable runtime config with create-react-app-inner-buildpack'
git push heroku master
```
## Local Development

View File

@@ -7,7 +7,7 @@
},
"scripts": {
"start": "node server",
"build": "cd react-ui/ && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
"build": "cd react-ui/ && npm install && npm run build"
},
"cacheDirectories": [
"node_modules",