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
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:
- Node server:
./package.json
- deployed automatically via heroku/nodejs buildpack
- React UI:
react-ui/package.json
- generated by create-react-app
- deployed via build hooks in the Node server's
./package.json
- module cache configured by
cacheDirectories
- bundling via
heroku-postbuild
hook
- module cache configured by
Includes a minimal Node Cluster implementation to parallelize the single-threaded Node process across the available CPU cores.
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.
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.
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 -k [!react-ui]* react-ui/ mv node_modules react-ui/ # If you see "fatal: Not a git repository", then fix that error mv react-ui/.git ./
⚠️ Some folks have reported problems with these commands. Using thebash
shell will probably allow them to work. Sorry if they do not work for you, know that the point is to move everything in the repo into thereact-ui/
subdirectory. Except for.git/
which should remain at the root level. -
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
Because this app is made of two npm projects, there are two places to run npm
commands:
- Node API server at the root
./
- React UI in
react-ui/
directory.
In a terminal:
# Initial setup
npm install
# Start the server
npm start
npm install package-name --save
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
# Always change directory, first
cd react-ui/
npm install package-name --save