Deploying a React and Node app to Heroku

5 min readNov 26, 2018

If you want instruction on how to build a React and Node app please read this blog. I’ll be using the app I built in that post as an example. The github repository can be found here.

Deployment is crucial for building a web app. There’s little value in creating something if you can’t put somewhere for others to see and use. It can also be a daunting task for new developers to deploy a full stack application as it isn’t as simple as uploading your files to a service. The documentation can be unclear sometimes. I’ll be explaining how to make deploying a React and Node app simple using Heroku. Note that I’m using webpack to build the React frontend, if you’re using create-react-app your steps for deployment will be different.

Why Heroku?

There are many different ways to deploy your site. Heroku is great because it’s a free service and easy to use. For a React/Node app all we’ll need to do is add a few things into our package.json file. The main drawback to using Heroku’s free service is the long start up time. The server won’t automatically run 24/7, so when users visit the site it’ll take some time to start up before they can access the site. I believe it’ll keep the server running for 30 minutes after the last user action. Unless your site is seeing a lot of traffic the server will likely have to start up every time a user navigates into it.

Deploying our App

Heroku Setup

Before anything make sure you’ve done the following:

Create an account with Heroku.
Install the Heroku CLI.
Login to Heroku in the command line by running heroku login.

From here on out we’ll be making very little changes to our code. Most of what we’ll be doing is running things through the CLI to deploy everything properly.

Setting up package.json

If you’re familiar with Heroku then you’ve probably heard of their Procfile. This file gives the app commands to run through Heroku’s dynos, like starting up the server. You can read more about the Procfile here if you’d like, but we won’t be using one. We can do everything through our package.json file.

Without a Procfile, Heroku will automatically run the start script in a Node application. We’ll also be adding a script called heroku-postbuild to run when the app is released.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "heroku-postbuild": "npm install && npm run build"
  },

If you’re following along from my last blog you’ll notice the build script was changed as well. Since this app is going live we’re changing the mode to production. The heroku-postbuild script will run as we’re deploying the app. It’ll install all our node dependencies then build the app. If you’d like to continue working on your app after deploying it rename your build script to something different (I like to call it dev-build) and add the new build script listed above.

Now we need to tell Heroku what versions of Node and npm we’re using for this application. If you’re unsure you can check by running the commands nvm which and npm --version in the command line. Add this above the scripts object in package.json.

"engines": {
    "node": "11.1.0",
    "npm": "6.4.1"
  },

Everything’s set up in our project files, so let’s move on to the Heroku side of deployment.

Heroku Repository

Run heroku create in the command line. This will create an empty Heroku repository and add it as a remote repository to our app. You should see something like this:

$ heroku createCreating app... done, ⬢ murmuring-fortress-95207https://murmuring-fortress-95207.herokuapp.com/ | https://git.heroku.com/murmuring-fortress-95207.git

Now we also have a URL for the app. Nothing’s there yet, so let’s push our app up to the Heroku repository. Before doing this make sure that your master branch is up to date with all the changes we’ve made so far. Push everything how you normally would with git: git push heroku master. If everything is done correctly the output should end with something like this:

remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 19.2M
remote: -----> Launching...
remote:        Released v3
remote:        https://murmuring-fortress-95207.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/murmuring-fortress-95207.git
* [new branch]      master -> master

You can open the app up immediately with heroku open, but you’ll notice there’s an error. We’re not finished with deployment yet.

Pushing up the Database

We’ll have to create the Postgres database for our Heroku app. Navigate to https://dashboard.heroku.com/apps/ and click on the repository you just created. Go to the Resources tab. There should be two sections, Dynos and Add-ons. In the Add-ons search bar look for Heroku Postgres and add it to our application. You’ll want to use the Hobby-Dev Free option for now, you won’t need anything from Heroku’s paid services for right now.

Now we need to add our local database to the Heroku database. Heroku has a command that lets us push up a database from the CLI. It’s heroku pg:push SOURCE TARGET. In this case SOURCE is our local Postgres database called quotes-app and the target is the database we just created through Heroku. To find the name for this database click on the Heroku Postgres add-on under the Resources tab. On the top left of the page you’ll see a navigation option that says Datastores > postgres-db-name, but instead it’ll have the actual name for your database. This will be the target database in the command. Run heroku pg:push quotes-app postgres-db-name in the command line.

If all things worked out you should a fully deployed application! Enter heroku open in the command line to have your browser automatically open up a new tab with your app on display. You can find my deployed app here.

Conclusion

We set up our Heroku account and installed the CLI so that we can access Heroku from the command line. We edited our package.json file so Heroku would know how to run the server once we pushed the code up. Then we created a repository for our app with Heroku and pushed up our project. Finally we added a Postgres database for the Heroku app and pushed our database to it.

Thank you for taking the time to read this blog. I hope you found it informative and helpful. Please leave a comment below if you have any questions.