How to Deploy an Application to Heroku

You’ve done the heavy lifting and built a web application, congratulations! After you’ve created your web application on your local machine, your next step is to put it online. Once your application is online, it will have its own web address so you can share what you have built with the world.

In the software and web development worlds, we call this process deployment. In the Software Development Life Cycle, deployment is the stage that comes after testing. If you’re interested in learning more about the cycle, read our tutorial “What is SDLC?”

One of the most popular ways to deploy a web application is to use Heroku. Heroku is a cloud application platform that allows you to host dynamic applications written in a wide range of languages, such as JavaScript and Python.

In this tutorial, we’ll teach you how to deploy an application to Heroku. We’ll walk through how to set up Heroku on your command line and how to deploy your project to the Heroku platform.

Who Should Use Heroku?

The Heroku platform specializes in the deployment of dynamic web applications. If you’re building a static site using HTML or CSS, you should probably consider another option. If you’re not building a web application, Heroku is also not for you.

Here are a few applications that could be deployed to Heroku:

• A to-do list app built using Python Flask
• A weather tracking app built using Ruby on Rails
• A Java microservice application
• A personal calendar app built using PHP
• A blog built using Node.js

Setting Up a Project

In this tutorial, we’re going to deploy a React application to Heroku. To keep things simple, we are going to deploy the create-react-app boilerplate to Heroku. This is a template which can be used as a starting point for any React application.

This part of the tutorial assumes you have npm and Node installed on your machine. You can skip to the “Get Started with Heroku” section if you already have an app to deploy.

To get started with create-react-app, we can run these commands:

npx create-react-app heroku-demo-app
cd heroku-demo-app
npm start

The first command will install create-react-app and initialize a sample application in the folder called heroku-demo-app. The second command will change our working directory to that folder so we can then run our newly-created demo application.

The npm start command tells us our application is now available at localhost:3000. Once I start the app locally, I can see the following:

Get Started with Heroku

Now that we’ve got an application to deploy, we can start the process of deploying it to Heroku. Before we get started, you should create an account on the Heroku platform, which you can do from their website.

There are a number of ways you can deploy an application to Heroku. You can use their web interface to deploy an application, use the command line or use Git.

For this tutorial, we’re going to use the command line. This requires installing the Heroku Toolbelt, or the Heroku CLI. You can do this by following the official Heroku Toolbelt installation instructions.

Log In to Heroku

Once you’ve installed the Heroku toolbelt in your command shell, you are ready to begin. First, you should log in to your Heroku account using this command:

heroku login

You’ll be prompted to insert your username and password which is used to authenticate your account from the command line. 

Define Your Process Types

The next step is to create a file called a Procfile. This will define the process types that tell Heroku how to deploy your application. You can create a Procfile using this command:

touch Procfile

Open the Procfile in your favorite text editor and then add in the line of code that allows you to run your application. In this case, because we’re deploying a React app, we’re going to insert the following command into the file:

web: npm start

The web: part of our command tells Heroku to create a new web instance to host our application. npm start is the command that Heroku should use to run our application.

What you type in here will vary depending on the type of application you are deploying. For instance, you may use web: flask run if you are deploying a Python Flask application.

Create an Application

Once you’ve set up a Procfile, you are ready to create an app. You can do so by running this command:

heroku create app-name-here

Substitute app-name-here for the name of your application. Once this command has run, you’ll see an output that looks something like this:

Substitute "app-name-here" for the name of your application. Once this command has run, you'll see an output that looks something like this:

Creating app... done, ⬢ app-name-here

If you navigate to the domain for your application, you’ll see a page that says no app exists yet. This is because we haven’t deployed our application to Heroku yet. That’s what we are going to do in the next section.

Set Up Git and Deploy Your App

You need to use the Git command in order to deploy your application to Heroku. To do so, we’ll need to do some more setup.

First, initialize a repository in your project folder and commit your code:

git init
git add *
git commit -m "Push code"

This will create a Git repository on our local computer for our project and add all of our code to a commit with the message Push code. Once we’ve run these commands, we are ready to deploy our application to Heroku.

Run this command to deploy your app to Heroku:

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

git push heroku master

It may take a few minutes between running this command and your application being available on the Internet for people to use.

This is because Heroku will need to install all the dependencies for your project. The more dependencies you have, the longer this process will take. However, after you deploy your project for the first time, you’ll notice this process typically speeds up.

Once our application has deployed, we can navigate to the URL of our application and see it live on the Internet:

That’s it! If you’re running an application that requires additional configuration, you may need to use the heroku run command to configure your app. For instance, you may need to use heroku run to migrate the database for your project, if you are using one.

Wrapping Up

Heroku is a great platform to deploy your dynamic web projects. Using Heroku, you can deploy a web application without having to create your own server. Heroku also has a favorable free plan which will allow you to run an application for free in the cloud.

Now you’re ready to start deploying your applications to Heroku like an expert!