Over a million developers have joined DZone.

GitHub Service Hooks: AppHarbor

DZone's Guide to

GitHub Service Hooks: AppHarbor

· DevOps Zone ·
Free Resource

Get the fastest log management and analysis with Graylog open source or enterprise edition free up to 5GB per day


The last 7 posts discussed how you can create a single-page application using GitHub, Twitter Bootstrap, MongoDB and Knockout.js.

One last thing I touched briefly during my session in September is continuous deployment using AppHarbor. If you are not familiar with AppHarbor, it’s basically .NET as a service where you can deploy a .NET application to the cloud.

In this tutorial let’s create a small web application, use GitHub for source control and automatically deploy any commits directly to our AppHarbor hosted site.

Table Of Contents

Single-page Application

First we’ll need a site which we can add to GitHub. Let’s use the single-page application created earlier during the 4-part Knockout.js series. I’m using this site as it also uses MongoDB. When deploying to AppHarbor we’ll need to replace the connection string to reflect the new environment. We’ll get back to that later.

You can download the application here:

Single-page application using Knockout.js

If you haven’t followed the Knockout series you can have a quick look, but it’s not required to be able to follow along

Top of page

GitHub Repository

Once you’ve downloaded the source code, go ahead and extract it.


Log in to your GitHub account and create a new (public) repository called MySinglePageApplication.

New Repository

Make sure to initialize it with a README and a .gitignore file for C#.

Once the remote repository has been created, open up GitHub for Windows and clone it to a local repository.

Clone Repository

When cloned, copy and paste the extracted files in this local repository.

Local Repository

Time to commit. Open up a GitHub shell for the repo and push the new files to the remote repository. You need to execute the following commands:

git add .
git commit -m "Initial commit"
git push

Once you execute the “git push” command your new code files will be uploaded to your remote repository. This will probably take a minute or two.

git push

Alright, the remote repository now contains the code for our single-page application.

Initial commit

If you are new to GitHub, be sure to read my post on getting started with GitHub first.

Top of page


If you haven’t signed up with AppHarbor yet, go ahead and create a free account. Once signed in create a new application called MySinglePageApplication. Be sure to select United States or Europe depending on your actual location.

New application

When the application has been created you’ll automatically be redirected to its dashboard. On the lefthand menu you should see a button labelled BUILD URL.

Build URL

Click it. This copies the application’s build URL to the clipboard. The URL has the following pattern:


Copy the value of the authorization query parameter into your clipboard. You won’t need the rest of the URL.

Top of page

Service Hook

Your application has now been configured in GitHub and AppHarbor. Time to link the two. Go back to your GitHub account and go the MySinglePageApplication repository’s admin section. In the lefthand menu click the service hooks option.

Service Hooks

You’ll be presented with a very long list of available service hooks. Locate the AppHarbor hook and select it. To link GitHub to AppHarbor you need to complete the following form:

AppHarbor Service Hook

Just enter “MySinglePageApplication” for the application slug and copy / paste the authorization ID from AppHarbor’s build URL into the token field. Check the active checkbox and finally click Update Settings.

That’s it. Your GitHub account is now linked to your AppHarbor application. Each time you push your commits to your remote repository GitHub will trigger the service hook and notify AppHarbor. AppHarbor in its turn will pull in the source code, build your application and automatically deploy it.

Top of page


There’s just one last thing we need to address. Our application uses MongoDB, this hasn’t been setup for the AppHarbor hosted application yet. Let’s rectify this. Go back to your application’s dashboard on AppHarbor and select the Add-ons menu item.

Locate the MongoHQ add-on and click the “See more” link.


Go ahead and install the free sandbox version which offers you 16 MB of storage.

MongoHQ sandbox

Voila, you’ve just added MongoDB support to your application. How does AppHarbor know how to replace your MongoDB connection string with its own? A simple naming convention does the trick. Just make sure you add your MongoDB connection string under the Web.config’s appSettings node and call it MONGOHQ_URL.

Go ahead and rename the connection string for the single-page application demo (Web.config + TimesheetsController.cs). Save the changes, commit and push them to the remote repository.

GitHub’s AppHarbor service hook will now deliver the payload to AppHarbor which in its turn will build and deploy your application. Just check your application’s dashboard on AppHarbor. Here you can follow the build’s progress.

Build status

On the top of the page you’ll find a “Go to your application” link. Click and you’ll notice that within a couple of minutes your new changes will have been deployed.

If you have any questions or suggestions please drop me an e-mail or submit a comment.

Get the fastest log management and analysis with Graylog open source or enterprise edition free up to 5GB per day


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}