• 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) fromThe 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 typenode 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 yourHeroku accountand click theNewbutton in the upper right corner of you dashboard. Then clickCreate new appto 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, clickCreate 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 theDeploytab.

In theDeploytab, you have three sections:

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

Looking at theDeployment methodsection, 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 theGitHubdeployment 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 theConnectbutton 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 theDeploy Branchbutton whenever you are ready to deploy.

Click theDeploy Branchbutton 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 andViewbutton.

This means the app was deployed, and Heroku has assigned a URL which people can use to visit the app. Click theViewbutton 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 theHeroku logs.

Abuild logcan be found in theActivitytab of the app’s dashboard.

ClickView build logon 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 ofHeroku Error Codes, and do a Google search if necessary.

Theapplication logcan be found inMorebutton 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 theHeroku Error Codesto 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!

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'