Today I want to walk through from configuring and deploying your environment so that you are able to successfully publish your web application to AppHarbor from the ground up.  With the recent addition of AppHarbor to the community, the process of configuring, building, and deploying a web application can now be fun, and possibly more importantly a completely free experience.

I am going to assume that you have a version of Visual Studio 2010 installed.  If not, the Express version (free) can be downloaded here.

Also, I will be deploying an ASP.NET 3 web application for this demo.  However, AppHarbor has full support for both ASP.NET MVC 1 and 2 web applications, as well as Web Forms.

With that out of the way, let’s begin.  I have already installed my copy of Visual Studio 2010.  Next I am going to grab a copy of Git Extensionswhich is a free download.  This will install Git on your Windows machine, as well as extensions which can be used in Visual Studio.  Let’s walk through the install below:

Install and Configure Git Extensions

1) Download and run the executable from the link above.  The version used at the time of this tutorial is 2.11

2) On the first options screen, it asks you to install MSysGit and Kdiff3.  Follow the recommendation and install both.

3) Install to the default directory recommend: C:\Program Files\GitExtensions\

4) Next screen is Custom Setup.  Leave all options as selected as default.

5) Next screen ensure “Putty” is selected.

6) Finally click “Install” the first sub installation process we have is to install Kdiff3 since we selected that earlier.  Install by clicking “Next” all the way through the process, without changing any settings.

7) Next, it prompts us to actually install Git.

8) Click and and install in to the default recommended location. 

9) Next, it asks us to select the components we want to install.  Ensure you select “Context menu entries”  This will make it easier for you in the future when spinning up a fresh Git shell.  See below:

10) Click next to install shortcuts.  Next it will prompt you on adjusting your PATH.  This is more of a UNIX thing which in UNIX will allow you to always use the Git command from Terminal/Bash.  Being on a Windows box, we aren’t really focused on that, we will just spin up a Git Bash console when we want to work with Git and leave Windows Command prompt untouched.  More on that later, for now, ensure you “Use Git Bash only.”

11) Line Breaks – By default Windows and UNIX end lines differently.  Git can handle this for us, ensure “Check out windows style, commit Unix style” is selected.  I have not had any issues deploying to AppHarbor with this selection.  If you don’t want Git messing with any of your line endings and you plan only working on Windows projects, select “Checkout as-is, Commit as-is”.

12) At this point, congratulations Git should be installed!

Spin up our ASP.NET MVC 3 Web Application!

If you already have a web application that you would like to push out to App Harbor, use that!  If not, we are going to spin up a quick one for demo purposes.

1)  Assuming at this point Visual Studio 2010 and ASP.NET MVC 3 are installed, Open Visual Studio: File-> New –>Project –> ASP.NET MVC 3 Web Application.  Create an “Empty” Template from the next dialog.

2) Inside Visual Studio, we are going to spin up a Controller which will handle our incoming requests.  Right Click on the “Controller” folder on the right side and select Add –> Controller.  Call it “HomeController” as seen below.  By convention, ASP.NET MVC uses the Home Controller to handle incoming requests to the root of your site “/”

3) You should now see a file similar to the one below.  Right click anywhere inside the “Index” method and select “Add View”

4) Your solution now should look similar to mine, where you have a fresh Home Controller and an “Index” view sitting in your Views/Home/ folder.

5) Change the <h2> text to say “Hello ____” and click the green play button at the top.  You now have a fully functioning website!

Deploy your ASP.NET MVC web application to AppHarbor

1) If you have not already done so, head over to http://appharbor.com and register for an account.  It is completely free!

2) Once registered, sign in and you should be presented with your existing Applications.  If you just signed up, you will now need to create an Application.  This tells creates the seed that tells AppHarbor that you want to publish a new site.

3) I called my Application “ajondeck”.  Click create!  You will now see a screen similar to below.  This is the details you need in order to actually push your site to AppHarbor.  Take note of your “Repository URL” it will be important in a moment.

4) Let’s hop back into Visual Studio Right click on the Solution and say “Open Folder in Windows Explorer”

5) In Windows Explorer now, lets navigate up one more directory, so we are sitting in the root of the directory that our MVC Web Application is in.  Right click on the Folder you named your web application and select “Git Bash Here”  This will spin up a fresh Bash client in which we will be able to interact with Git.

6) If you haven’t used Git before, the steps following are going to be the minimum required to get off the group with App Harbor.  Git is much more powerful and could deserve diving deeper into.

7) Let’s first initiate a Git Repository.  This will spin up a repository for us that we we can add/commit to.  Inside your Bash Console, type: git init

8) Now that our repository is initialized, let’s add our files.  This will add all our files to the queue, ready to commit.  type: git add .

9) All our files our added, finally we need to actually commit them to the repository!  type: git commit –m “initial commit”

10) Our web application is now versioned locally!  Almost there.

11) Let’s refer back to the App Harbor site and grab our “Repository URL”.  In this case, mine is https://ajcool123@appharbor.com/ajondeck.git

12) Now let’s add AppHarbor as a remote repository.  This will give us the ability to push to it!  You will obviously use YOUR specific “Repository URL” that we talked about above.  type: git remote add appharbor https://ajcool123@appharbor.com/ajondeck.git

13) At this point, simply type: git push appharbor master

14) Enter your password at the prompt, and all your files will be pushed automatically to the servers of AppHarbor!

15) You should be able to view your application live @ http://YourApplicationName.apphb.com in my case, check out the one built for this demo here!  http://ajondeck.apphb.com

Enjoy playing around with building and deploying your sites!  Have fun!