# create-react-app with a Node API 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.

To deploy only a front-end/UI React app use  
▶️ [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`


## Punchline

Demo deployment: [https://cra-node.herokuapp.com/](https://cra-node.herokuapp.com/)

Example API call is [fetched from relative URL](react-ui/src/App.js#L16).


## Deploy to Heroku

```bash
git clone https://github.com/mars/heroku-cra-node.git
cd heroku-cra-node/
heroku create
git push heroku master
```


## Local Development

### Run the API Server

In a terminal:

```bash
# Initial setup
npm install

# Start the server
npm start
```


### Run the React UI

The React app is configured to proxy backend requests to the local Node server. (See [`"proxy"` config](react-ui/package.json))

In a separate terminal from the API server, start the UI:

```bash
# Initial setup
npm install --prefix react-ui

# Start the server
npm start --prefix react-ui
```