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
Prerequisites & Setup
Before starting, you’ll need to have:
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.
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:
webthat lets Heroku know that this app will receive web traffic, and a command to start the process:
node app.jswhich starts the server (just like if you were to type
node app.jsto 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:
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.
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.
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!