DevOps Zone is brought to you in partnership with:

I started out writing Windows applications using Delphi and websites using PHP back in 2001. In 2007 I made the switch to the .NET framework and haven't looked back since. Currently I am working as a .NET developer for Euricom in Belgium. Christophe is a DZone MVB and is not an employee of DZone and has posted 23 posts at DZone. You can read more from them at their website. View Full User Profile

GitHub Service Hooks: AppHarbor

11.02.2012
| 3343 views |
  • submit to reddit

IntroductionAppHarbor

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.

Files

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

AppHarbor

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:

https://appharbor.com:443/applications/mysinglepageapplication/builds?authorization=YOUR_AUTHORIZATION_ID

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

MongoDB

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.

MongoHQ

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.

Published at DZone with permission of Christophe Geers, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)