May 19, 2020
I spent an entire day figuring out how to deploy my project to Heroku from a monorepo. This didn't need to take an entire day. These are the steps I took to deploy my project and wish I knew from the start.
Heroku is a cloud platform that developers use to deploy, manage, and scale apps.
A monorepo is a single repository that houses all code and assets for a project.
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.
Run this command to install Heroku with npm:
npm install -g heroku
Run this command to login to Heroku from your terminal:
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.
heroku apps:create creates a new Heroku application and a git remote. The command takes one argument:
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
Run the following command to see your connected remotes:
git remote -v
git remote add adds new remotes. The command takes two arguments:
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
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
Run the following command to see error messages:
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
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: