create-react-app with a Node API on Heroku

Example app combining a React UI (from create-react-app) with a custom Node/Express server.

If you simply want to deploy a React app, try create-react-app-buildpack.

Design Points

• Node server
  • 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/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
• Heroku
  • heroku/node buildpack will auto-detect via package.json
  • npm install for server & postinstall for React UI will automatically run
  • npm start will automatically launch

Punchline

Demo deployment: https://cra-node.herokuapp.com/

Example API call is fetched from relative URL.

Deploy to Heroku

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:

# 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)

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

# Initial setup
npm install --prefix react-ui

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