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.
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:
- macOS: Via the installer or using Homebrew
- Windows: Via the installer
- Linux: Via Snap, standalone installer, tarball or package manager
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/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
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
You’ll probably have no apps available at this point:
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
heroku create --help
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:
- A URL at which you can reach the app, e.g.
- A Git URL which is the source code repo to which we will deploy our source code, e.g.
You can list your apps again now:
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
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:
This should yield something like the following:
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:
- It will push the source code to the
masterbranch on the Heroku remote
- It will ensure the correct version of GHC is available
- It will build your package and its dependencies
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!