usethetypes#8: Hosting Your App on Heroku

In this video, we’ll go through the steps required to get your Haskell web application up and running on the Internet using Heroku.

Builds on

Step 1: Sign up for an Heroku account

Before you go any further, you’ll need to sign up for a free account with Heroku via the sign-up page. This should be fairly straightforward. It will involve an e-mail address verification step. You’ll also need to create a password which you should remember for later. Once you’ve done this and are able to view your Heroku dashboard, you can proceed to the next step.

Step 2: Install the Heroku CLI

I am a command-line sort of a person and so I will do most things using the Heroku CLI. Before we can go any further, we’ll need to install it. There are several ways to install the CLI depending on which platform you’re running on:

I’m running a fairly recent version of Ubuntu which includes Snap by default, so I’m going to use this since it’s probably the easiest way to get up and running (and I’m opinionated):

sudo snap install --classic heroku

Whichever method you choose, once that’s done, you should be able to open a terminal and check the version you’re running:

heroku --version

This reports heroku/7.19.4 linux-x64 node-v11.3.0 for me. You should get something similar.

Step 3: Log in to Heroku from the command line

heroku login

This will start a browser-based authentication session. Make sure that the browser logs you in as the correct user.

Step 4: Runs some CLI commands

You can list available commands with the help command:

heroku help

You’ll probably have no apps available at this point:

heroku apps

Step 5: Grab our web app

Now we’re going to get our little Haskell app’s source code and create a new repo:

cd $HOME/src
mkdir snap-hello-world
cd snap-hello-world
wget -O - https://github.com/usethetypes/usethetypes-007-config-port/archive/master.tar.gz | tar xvz --strip-components=1
git init
git add .

Let’s commit these changes:

git commit -m "Initial commit"

Step 6: Create an Heroku app

To do this we’ll use the Heroku create command:

heroku create --help

Running create with no additional arguments will create a new app using the default Heroku stack which is, I believe, Ruby on Rails. We’ll make use of the --buildpack option to indicate a specific type of application. We’ll use the heroku-buildpack-stack build pack which is available on GitHub if you’re interested in the details of how this works. Let’s create a new app with this build pack and default values for everything else:

heroku create --buildpack https://github.com/mfine/heroku-buildpack-stack

This generates a brand-new Heroku app with a guaranteed-unique name and a corresponding Git repo. Make a note of the output of this command for later use. This will include the following:

You can list your apps again now:

heroku apps

Or display information specific to this app:

heroku info stark-bastion-84125

A side effect of the create command is that the CLI should’ve set up your Git remotes to point to the new deployment repo:

git remote -v

This should show fetch and push remotes corresponding to your new app.

Step 7: Create a Procfile

Before you can deploy, you need to tell Heroku about your app’s executable:

echo web: snap-hello-world > Procfile

Confirm that your Procfile was created correctly:

cat Procfile

This should yield something like the following:

web: snap-hello-world

Add the Procfile and commit it to your repo and we’re almost ready to go:

git add .
git commit -m "Heroku Procfile"

Step 8: Build and deploy

To push your source code and built it, use the following:

git push heroku master

This will do several things:

This might be quite time-consuming the first time you run it. Subsequent pushes should be much quicker since Heroku will cache build artifacts between invocations.

Step 9: Visit your new web site!

Visit your app’s URL in your browser: https://stark-bastion-84125.herokuapp.com/. Assuming that all works, you should then share it with your friends!