Deploying a Back-End with Heroku

Note: This article is currently teaching deployment using Heroku which no longer offers a free tier plan.

Deploying a Back-End

The back-end is a crucial part of most apps. It’s used in operations involving routing, requests, and data. And, as you know, Heroku is a service that lets you get a back-end app up-and-running quickly. In this article, you’ll learn how to deploy a simple, pre-built, Node.js app on Heroku’s platform. But if JavaScript isn’t your cup of tea, feel free to follow along using your preferred language, and/or personal repository.

Prerequisites & Setup

Before starting, you’ll need to have:

• a Heroku account
• a GitHub account

Heroku

If you haven’t already, read through Getting Started with Heroku to create an account and learn the basics.

When deploying an app with Heroku, you have the option of using the Graphical User Interface (GUI), or Heroku’s own Command Line Interface (CLI). Since having a visual interface to interact with can be advantageous to new learners, this article will stick to using the Heroku GUI for deployment.

Fork the GitHub Repository

This article will use the app found at: https://github.com/Codecademy/deploying-backend-with-heroku-sample to deploy to Heroku. You’re free to use your own project, but make sure to modify the steps as needed.

First, fork the repository to your own GitHub account by clicking the Fork button in the source repository. (Need more of an explanation? Try our Learn Git & GitHub course.)

You’ll now have a copy of the app in your own GitHub account. Take a look at the files, there are 2 important ones to explore further:

• app.js - The app’s entry point. This file defines the port for your web server, and contains all of the logic for the app. In this case, you are fetching data (an activity, specifically) from The Bored API. Take a look at the comments to better understand what each line does.

• Procfile - A text file that is used by Heroku to tell it what commands to run on startup. Your Procfile contains a process type: web that lets Heroku know that this app will receive web traffic, and a command to start the process: node app.js which starts the server (just like if you were to type node app.js to start a server on your local host).

Testing out an app for Proof of Concept, or needing a Minimum Viable Product is something that happens often. To share the app, you could show the code to the person and tell them to imagine what it does…

Or, you could set up a server, configure ports, and point a new domain to the server, which might not be something you’re prepared to (or wanting to) do with your time.

Instead of spending time figuring out a domain and server configuration, use Heroku to deploy it for the world to see!

Deploying to Heroku

Login to your Heroku account and click the New button in the upper right corner of you dashboard. Then click Create new app to start creating your first app on Heroku.

On the next screen, name your app (you can name it anything, but a name similar to the GitHub repository in which you’re deploying from is helpful). When you have a good name, click Create App.

Every app you create on Heroku will have a menu with these tabs:

• Overview
• Resources
• Deploy
• Metrics
• Activity
• Access
• Settings

When an app is created, you are taken to the Deploy tab.

In the Deploy tab, you have three sections:

• Add this app to a pipeline
• Deployment method
• Deploy using Heroku Git

Looking at the Deployment method section, there are three different options for deploying your app. This example will show how to deploy by connecting to GitHub. When your app is connected to GitHub, Heroku will build and release the code stored in your GitHub repository. Click the GitHub deployment method to reveal a new “Connect to GitHub” section.

In the “Connect to GitHub” section, search for the app you cloned during setup: it should be something similar to “deploying-backend-with-heroku-sample”. When the app appears, click the Connect button to reveal two new sections.

These new sections are where the magic happens!

• Automatic deploys - Enabling automatic deploys will tell Heroku to deploy the specified branch of your app every time a new version is pushed to GitHub.
• Manual deploy - This allows you to deploy the specified branch of your app, manually, by clicking the Deploy Branch button whenever you are ready to deploy.

Click the Deploy Branch button to manually deploy your app. You will see a log that scrolls through the build processes. When it finishes successfully, there will be a success message and View button.

This means the app was deployed, and Heroku has assigned a URL which people can use to visit the app. Click the View button to be taken to your new URL and see what today’s activity will be:

That’s all there is to it! You can refresh the page a few times to fetch new activities.

Troubleshooting

It’s likely, at some point, that you run into an error when Heroku attempts to deploy your app. And even after successful deployments, there may be errors in your code that prevent the app from being displayed. The first place to look when you run into an issue is the Heroku logs.

A build log can be found in the Activity tab of the app’s dashboard.

Click View build log on the build event in question to see the complete log of the build. If you come across an error code, run it by the list of Heroku Error Codes, and do a Google search if necessary.

The application log can be found in More button located in the top left corner of your app’s dashboard (while in any tab).

Select “View logs” to see the complete application log. Again, reference the Heroku Error Codes to troubleshoot further.

Wrap Up

Congratulations on deploying your first app with Heroku! As you can see, the deployment process is a breeze. You now know how to deploy an app from a GitHub repository using Heroku’s GUI, as well as how to begin troubleshooting any errors that may occur.

Take this knowledge further by turning on Automatic Deploys, and pushing a change to GitHub. Then visit the URL to see the change “magically” deployed by Heroku. And if you enjoy using Heroku, be sure to give the Heroku CLI a try in order to create and manage your Heroku apps directly from the terminal!