Deploying a Back-end with Heroku
Learn how to deploy a Back-end app using Heroku and GitHub.
Deploying a Back-end
Prerequisites & Setup
Before starting, you’ll need to have:
- a Heroku account
- a local installation of Node.js
- and a local installation of npm (installs with Node.js)
- familiarity with git and a GitHub account
If you haven’t already, read through Getting Started with Heroku to create an account and learn the basics of Heroku.
When deploying an app with Heroku, you have the option of using their 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, albeit the majority of the setup process (for Node and git) will require the command line.
Node and npm
You can check that Node and npm are installed, by checking their versions in the command line:
If these commands return a version number, you’re good to go! If not, set up Node locally, and try again. Also, as a reminder, installing Node will automatically install npm.
Setting Up a GitHub Repo
As mentioned, we’ll provide the steps for how to set up a GitHub repo using a simple backend found: . You’re free to use your own project, but make sure to modify the steps as needed.
- Similar to checking your Node and npm installations, you can check your git installation by typing:git --version
- Then, log into your GitHub account and create a new repository called: “heroku-backend-app”.
- Create a local directory, and clone the app to be deployed:git clone https://github.com/CODECADEMY-GITHUB-LINK-HERE
- While still in the same directory, install the Node modules:npm install
- Then, set the remote url to your new GitHub repository:git remote set-url origin https://github.com/YOUR-USERNAME/heroku-backend-app.git
- Set the branch as main:git branch -M main
- And push to the remote directory:git push origin main
You now have a local version of the app, as well as a remote GitHub repository.
Navigate to the directory containing the app. There are 2 important files to explore:
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 code 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 when you type
node app.jsto start a server on your local host).
Run the app locally by typing:
Your console will let you know when the app is running. Then, visit ‘localhost:5000’ in your browser to view the app in all its glory! You should see some text that suggests an activity:
Refresh the page a few times to fetch new activities.
Since this app is running on your local host, you aren’t able to share it with anyone who doesn’t have access to your computer. Without Heroku, this could mean buying a domain, and setting up a server, which might not be something you’re prepared to (or wanting to) do with your time.
Deploying to Heroku
Instead of spending time figuring out a domain and server configuration, use Heroku to deploy it for the world to see!
Login to your Heroku account and click the New button, and then 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: “heroku-backend-app”. 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 deploy your app. You will see a log that scrolls through the build processes, and 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 it. Click the View button to be taken to your new URL!
You can refresh the page a few times to fetch new activities. The app is identical to the local host deployment, but now you have a server and URL that lets you access it from anywhere.
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 are 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.
Another 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, once you have all the prerequisites in place, the deployment process is a breeze. You now know how to deploy an app 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!