Deploy Your First Heroku App

Learning Objectives

After completing this unit, you'll be able to:

  • Deploy an application to Heroku with a Heroku Button.
  • Continue exploring Heroku with your new account.

Deploying an App to Heroku

So far you've learned what you can do with the Heroku Platform. All along the way we've said how easy it is to use, and now you're going to see what we mean. After this unit, you'll have a real web application up and running on the Heroku Platform! Don't worry, we’ll walk you through each step.

Sign Up for a Heroku Account

To deploy an app on Heroku, you need an account on the platform. It’s quick and easy (and totally free) to sign up. Go ahead and do that now at We’ll wait here.

Deploy with a Button

After you're logged in to your shiny new Heroku account, you'll find yourself in the Heroku Dashboard. It says, "Getting Started with Heroku". If you're new to Heroku, select one of the icons that represent your programming language and follow the Getting Started guide to create a new app.

But Heroku offers a way for you to get started even quicker by using a tool called Buttons. With just the click of a button, you can deploy a preconfigured app that has everything it needs, including code, configurations, and add-ons. By creating your first Heroku app with a button, you get a flavor for how easy the platform is to use. You also get a real, functioning Node.js app that you can explore and modify to learn more.

Install your first app by clicking this button:

Create New App Button

  1. Enter a name for your new app, or let Heroku choose one for you.
  2. Select in which region to create your runtime: United States or Europe.
  3. Click Create App to deploy the application. Within a minute or two your app will be up and running on Heroku!

Create New App page which allows you to enter an app name and select a region.

Click View to see your app in action, running live on the web.

New App as it appears running on Heroku

Hello World! Congratulations, you’ve just deployed your first app to Heroku. How easy was that?

Command Line Included

While some developers love the ability to use Heroku through the Heroku Dashboard, others prefer to work on the command line. Heroku provides complete tools for developers in both camps.

Heroku’s command-line tools have evolved from the basic commands that developers are already using. The prime example is the most basic Git command: git push. A developer using Git for code versioning can type that 50 times a day to store incremental changes to code in a repository. With Heroku, a developer can use that same Git command to deploy code to Heroku, merely by specifying a new target remote associated with their application: git push heroku main. Done and done.

Heroku's tools are a collection of command-line incantations and web-based interfaces that distill the hard and complex into the simple, yet elegant. They’re based on what developers already know and love, making it easy — and painless — to start using Heroku. You can click Create new app in the Heroku Dashboard, but it's just as easy with the Heroku CLI command heroku create. Either way, you’d be ready to get to the fun part: writing a custom app in your favorite open-source language.

The mission of Heroku is to make developers more productive and powerful, expand what they can do, and to support them in building the unexpected. The Heroku CLI has dozens of powerful Heroku commands. They all start with the word heroku.

After you've installed the Heroku CLI, open up a terminal and type heroku help to dig in. If you prefer using the command line over the dashboard, the next section is right up your alley. If you’re not sure, read on and see if you can follow along. If it’s really not your thing, don’t worry! Go ahead and move on to the Challenge if you’re ready for the next unit.

Try Out the Command Line Interface

Now that you’ve installed the Heroku CLI, open up a terminal window and type heroku login.

The CLI asks you to enter your Heroku credentials, starting with the email address that serves as your username. When you're logged in, you can always check which user is logged in with the command heroku auth:whoami.

Now you can view some details about your app right in the terminal. To see a list of apps that you can access, type heroku apps. You see some output that looks something like this:

CLI: Apps List

Do you see the name of the app that you just deployed using the Heroku Button? Let’s ask the CLI to share information about your new app. In this example, the app is called shiny-new-heroku-app: heroku apps:info shiny-new-heroku-app.

Enter the heroku apps:info command with the name of your app. You see some output like this:

CLI: App Info

You get a lot of information there about your app. You can see how many dynos (containers) you have running (one dyno of a type called “web”) and the web URL by which you can access your app on the Internet.

Let’s scale the app down so that it’s not running on any dynos. We’ll use the command line to scale and then we can verify it in the Heroku Dashboard and on the web. Enter the following command: heroku ps:scale web=0 -a <your app’s name>.

The Heroku CLI gives you some feedback, saying something like, “Scaling dynos... done, now running web at 0:Standard-1x.” Now when you run heroku apps:info with the name of your app, you see that the value for dynos is blank. No dynos are running. If you don’t believe it, have a look on the dashboard!

Dashboard: Resources Tab with no Dynos

If the app isn't running web dynos, what do you think will happen if you try to access the app using its web URL? Go ahead and open your app on the web with the command heroku open -a <your app’s name>. Drum roll...

Application Error

Oh no! With no web dynos running, your app is not being served on the web. That won’t do, so let’s scale back up to one web dyno using the CLI: heroku ps:scale web=1 -a <your app’s name>. Cross your fingers, count to five, and reload your browser. Your app is alive and well again on the Internet. Phew!

Now that you’ve deployed an app on Heroku and fiddled with its configuration using the Heroku CLI on the command line, it’s time to push some updates to your app for the world to see.

Make a Change with the Command Line

Before you pull down your code to your local machine, create a directory to hold your code. After you've created it, open up a terminal window and change to your new directory.

You can pull your code down from Heroku and work on it locally by cloning the app:

git clone <your app’s name>
cd <your app’s name>
heroku git:remote -a <your app’s name> 

Cloning creates a directory named after your app with its source and complete repository history, as well as adding a heroku git remote to facilitate further updates.

Now it’s time to make a small change to your app and see that change propagated back to the running application on Heroku.

Open /views/pages/index.ejs in your favorite text editor and replace <h1>Getting Started with Node on Heroku</h1> with <h1>My Name is <your name> and I’m Getting Started with Node on Heroku</h1>. Save the file, commit it to git, and deploy the change back to Heroku with the following incantation:

git commit -am "my first heroku push"
git push heroku main 

You see a lot of text scrolling in your terminal that looks something like the following:

Screenshot of text scrolling in a terminal command  window

When complete, you and your family and friends should be able to open a browser and see your changes running on Heroku!

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities