create-react-app with a Node server on Heroku
A minimal example of using a Node backend (server for API, proxy, & routing) with a React frontend.
To deploy a frontend-only React app, use the static-site optimized
Design Points
A combo of two npm projects, the backend server and the frontend UI. So there are two package.json
configs and thereforce two places to run npm
commands:
package.json
for Node server & Heroku deployheroku-postbuild
script compiles the webpack bundle during deploycacheDirectories
includesreact-ui/node_modules/
to optimize build time
react-ui/package.json
for React web UI- generated by create-react-app
Includes a minimal Node Cluster implementation to parallelize the single-threaded Node process across the available CPU cores.
Demo
Demo deployment: example API call from the React UI is fetched with a relative URL that is served by an Express handler in the Node server.
Deploy to Heroku
git clone https://github.com/mars/heroku-cra-node.git
cd heroku-cra-node/
heroku create
git push heroku master
This deployment will automatically:
- detect Node buildpack
- build the app with
npm install
for the Node serverheroku-postbuild
for 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
- serves
package-lock.json
? We resolved a compatibility issue. See PR for more details.
👓 More about deploying to Heroku.
Switching from create-react-app-buildpack
If an app was previously deployed with create-react-app-buildpack, then a few steps are required to migrate the app to this architecture:
-
Remove create-react-app-buildpack from the app; heroku/nodejs buildpack will be automatically activated
heroku buildpacks:clear
-
Move the root React app files (including dotfiles) into a
react-ui/
subdirectorymkdir react-ui git mv [!react-ui]* react-ui/ # You'll see "fatal: Not a git repository"; let's fix that error mv react-ui/.git ./
-
Create a root
package.json
,server/
, &.gitignore
modeled after the code in this repo -
Commit and deploy ♻️
git add -A git commit -m 'Migrate from create-react-app-buildpack to Node server' 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:
# Always change directory, first
cd react-ui/
# Initial setup
npm install
# Start the server
npm start