📣 Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

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 Heroku Enterprise. 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 signup.heroku.com. We’ll wait here.

Deploy with a Button

After you're logged in to your shiny new Heroku account, you'll find yourself at the 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 Open App 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: The Heroku Toolbelt

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 CLI 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 Enterprise, a developer can use that same Git command to deploy code to Heroku, merely by specifying a new target remote: git push heroku master. 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 App in the Heroku dashboard, but it's just as easy with the Heroku Toolbelt 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 Enterprise is to make developers more productive and powerful, expand what they can do, and to support them in building the unexpected. The Toolbelt has hundreds of Heroku commands. They all start with the word heroku.

After you've installed the Heroku Toolbelt, 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

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

The Toolbelt asks you to enter your Heroku credentials, starting with the email address that serves as your username. When you're loggedin, you're on the command line. You can always check which user is logged in to the Heroku Toolbelt 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 kinda like this:

Toolbelt: Apps List

Do you see the name of the app that you just deployed using the Heroku button? Let’s ask the Toolbelt 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:

Toolbelt: App Info

You get a lot of information there about your app. You can see how many dynos 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 Toolbelt 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 Toolbelt: 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 Toolbelt 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 https://github.com/heroku/node-js-getting-started <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 master 

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!

retargeting