Deploy Your First Heroku App
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 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 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:
- Enter a name for your new app, or let Heroku choose one for you.
- Select in which region to create your runtime: United States or Europe.
- Click Create App to deploy the application. Within a minute or two your app will be up and running on Heroku!
Click View to see your app in action, running live on the web.
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
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
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
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:
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.
heroku apps:info command with the name of your app. You see some output like this:
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!
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...
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 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.
/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:
When complete, you and your family and friends should be able to open a browser and see your changes running on Heroku!