mohiit1502/heroku-cra-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

📚 clarify purpose

Browse Source
This commit is contained in:
Mars Hall
2017-02-06 20:01:58 -08:00
committed by GitHub
parent a0500c5476
commit 73efcbe75f
1 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

@@ -1,36 +1,25 @@
# create-react-app with a Node API on Heroku
# create-react-app with a Node server on Heroku
Example app combining a React UI (from [create-react-app](https://github.com/facebookincubator/create-react-app)) with a custom Node/Express server.
A minimal example of using a Node backend (API, proxy, & routing) with a [React app](https://github.com/facebookincubator/create-react-app) and an [Express server](http://expressjs.com).
To deploy only a front-end/UI React app use
To deploy a frontend-only React app, use the static-site optimized
▶️ [create-react-app-buildpack](https://github.com/mars/create-react-app-buildpack)
## Design Points
* [Node server](server/)
* [`package.json`](package.json), at the root
* `postinstall` script performs React app's `npm install` on deploy to Heroku
* `cacheDirectories` includes `react-ui/node_modules/` to speed up subsequent deploys to Heroku
* serves `../react-ui/build/` as static files
* `npm` works normally
* [React app](react-ui/)
* [`react-ui/package.json`](react-ui/package.json), in a subdirectory
* as generated by create-react-app
* plus the `proxy` config enables dual-process (hot-reloading React UI + Node API) for local development
* `npm` must be run against the subdirectory
* use the prefix option, `npm start --prefix react-ui`, or
* change directories `cd react-ui/` to use `npm`
* [deploy to Heroku](https://devcenter.heroku.com/categories/deployment)
* automatically:
* detects [Node](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nodejs) from `package.json`
* builds with `npm install` for server & `postinstall` for React UI
* launches web process with `npm start`
A combo of two npm projects, the backend and the frontend. So there are two `package.json` configs.
1. [`package.json`](package.json) for [Node server](server/) & [Heroku deploy](https://devcenter.heroku.com/categories/deployment)
* `postinstall` script builds the React UI webpack bundle
* `cacheDirectories` includes `react-ui/node_modules/` to optimize deploy to Heroku
2. [`react-ui/package.json`](package.json) for [React web UI](react-ui/)
* generated by [create-react-app](https://github.com/facebookincubator/create-react-app)
## Punchline
Demo deployment: [https://cra-node.herokuapp.com/](https://cra-node.herokuapp.com/)
[Demo deployment](https://cra-node.herokuapp.com/).
Example API call is [fetched from relative URL](react-ui/src/App.js#L16).
@@ -44,6 +33,18 @@ heroku create
git push heroku master
```
This deployment will automatically:
* detect [Node buildpack](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nodejs)
* build the app with
* `npm install` for the Node server
* `postinstall` to build the webpack bundle from create-react-app
* launch the web process with `npm start`
* serves `../react-ui/build/` as static files
* customize by adding API, proxy, or route handlers/redirectors
👓 More about [deploying to Heroku](https://devcenter.heroku.com/categories/deployment).
## Local Development
@@ -67,9 +68,12 @@ The React app is configured to proxy backend requests to the local Node server.
In a separate terminal from the API server, start the UI:
```bash
# Always change directory, first
cd react-ui/
# Initial setup
npm install --prefix react-ui
npm install
# Start the server
npm start --prefix react-ui
npm start
```