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
git clone https://github.com/mars/heroku-cra-node.git cd heroku-cra-node/ heroku create git push heroku master
This deployment will automatically:
npm installfor the Node server
npm run buildfor create-react-app
../react-ui/build/as static files
⚠️ Using npm 5’s new
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
Move the root React app files (including dotfiles) into a
mkdir 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 the
bash 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 the
react-ui/ subdirectory. Except for
.git/ which should remain at the root level.
Commit and deploy ♻️
git add -A git commit -m 'Migrate from create-react-app-buildpack to Node server' git push heroku master
create-react-app itself supports configuration with environment variables. These compile-time variables are embedded in the bundle during the build process, and may go stale when the app slug is promoted through a pipeline or otherwise changed without a rebuild. See create-react-app-buildpack's docs for further elaboration of compile-time vs runtime variables.
create-react-app-buildpack's runtime config makes it possible to dynamically change variables, no rebuild required. That runtime config technique may be applied to Node.js based apps such as this one.
Add the inner buildpack to your app, so that the
heroku/nodejs buildpack is last:
heroku buildpacks:add -i 1 https://github.com/mars/create-react-app-inner-buildpack # Verify that create-react-app-inner-buildpack comes before nodejs heroku buildpacks
Set the bundle location for runtime config injection:
heroku config:set JS_RUNTIME_TARGET_BUNDLE='/app/react-ui/build/static/js/*.js'
Now, build the app with this new setup:
git commit --allow-empty -m 'Enable runtime config with create-react-app-inner-buildpack' git push heroku master
Because this app is made of two npm projects, there are two places to run
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
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
Copy the snippet above into CLI.