How to deploy a create-react-app with an Express backend to Heroku

You used the create-react-app cli tool to create your React app, and now you want to add a backend such as Express. How do you do it?

There are several ways to go about it:

Host them separately: Deploy the Express app on one machine, and the React app on another machine.

Use a proxy: Both apps are hosted together, but served by different servers.

Keeping them together: Have your frontend React files and backend Express files exist on one server, and have Express serve your React files in addition to the API requests.

Here, we will focus on the third option. Together, we will create a simple app that uses Express to create a backend API, and also serve React files. Then we will deploy it on Heroku. If you don’t have a Heroku account, sign up for free! In addition, install the Heroku cli tools. (Alternatively, just $ brew install heroku)

Let’s create our app!

The Backend Express app

First we’ll create our root directory. I’ve named mine crae-example but feel free to be creative. Then, initialise it with NPM or Yarn.

$ mkdir crae-example
$ cd crae-example
$ npm init

Install packages with NPM or Yarn, then make our index file.

$ npm i express cors cowsay
$ touch index.js