How to Deploy a React App and Node.js/Express Backend API to Heroku From a Monorepo

This is how I deployed my monorepo project to Heroku.

Prerequisites

• Heroku account
• Command line usage
• A project in a monorepo with client and backend folders

What is Heroku?

Heroku is a cloud platform that developers use to deploy, manage, and scale apps.

What is a Monorepo?

A monorepo is a single repository that houses all code and assets for a project.

My Monorepo Set Up

This is what my monorepo looks like:

/breadpun-api
    /backend
    /client

I have two folders, (1) backend and (2) client in a folder called breadpun-api.

The backend folder contains code for a Breadpun API built with Node.js/Express.

The client folder contains code for a React app that fetches and displays data from the Breadpun API.

See the monorepo on Github.

How to Deploy

1. Download the Heroku Command Line Interface (CLI).

I used npm to download Heroku. If you use npm, you'll need to have node and npm installed.

Run this command to install Heroku with npm:

npm install -g heroku

2. Login to Heroku using the Heroku CLI

Run this command to login to Heroku from your terminal:

heroku login

You'll be redirected from your terminal to login through the browser. After logging in in the browser, your terminal will show that you're logged in.

3. Create Heroku apps for backend and client folders

heroku apps:create creates a new Heroku application and a git remote. The command takes one argument:

1. app name, for example, my-bao-server

heroku apps:create [name]

Run the following command to create a new app for your backend:

heroku apps:create my-bao-server

The Heroku buildpack deploys a React UI as a static web site. Run the following command to create a new app for your client:

heroku apps:create my-bao-client3 --buildpack mars/create-react-app

4. Inspect your remote apps

Run the following command to see your connected remotes:

git remote -v

5. Create two new remotes for your client and server

The git remote add adds new remotes. The command takes two arguments:

1. remote name, for example, heroku-server
2. remote URL, for example, heroku-client

git remote add [remote name] [remote url]

Run the following commands to create new remotes:

git remote add heroku-server https://git.heroku.com/my-bao-server
git remote add heroku-client https://git.heroku.com/my-bao-client3

6. Push sub folders to remotes to deploy

git subtree lets you nest one repository inside another as a sub-directory.

Run the following commands from your parent directory to add, commit, and push your changes:

git add .
git commit -m "init commit"
git subtree push --prefix backend heroku-server master
git subtree push --prefix client heroku-client master

7. Log errors, if any

Run the following command to see error messages:

heroku logs

8. Redeploy after any updates

Run the following commands from your parent directory to add, commit, and push your updates:

git add .
git commit -m "add updates"
git subtree push --prefix backend heroku-server master
git subtree push --prefix client heroku-client master

Conclusion

It is possible to deploy a React app and Node.js/Express backend API to Heroku from a monorepo. And also not take an entire day to figure it out. 🤪

For reference, here's the:

• Deployed client: https://my-bao-client3.herokuapp.com/
• Deployed backend: https://my-bao-server.herokuapp.com/api/breadpuns
• Breadpuns API GitHub repository

Resources:

• Deploying client and server code to heroku from a single git repo by Karolis Stulgys
• Heroku Buildpack for create-react-app