Using AppHarbor, Bitbucket and Mercurial with ASP.NET and Silverlight – Part 1

Imagine an easy way to create, test and deploy a scalable web application for free.

Keep that thought and let’s do it in the time of a single blog post.

1. Create an account for AppHarbor. AppHarbor is, as they call it, “Azure done right” and our web application will be hosted by this great service.
2. When logged in, create an application, give it a nice, recognizable name. I’ll use DemoApp in this tutorial.
   
3. AppHarbor allows us to publish the application by pushing the source code of our application to AppHarbor using Git. Although this is very convenient, I am a fan of Mercurial and Bitbucket and will show you how to use these to deploy the application to AppHarbor.
4. Download and install TortoiseHG. TortoiseHG is a client tool for the Mercurial distributed version control system. It is easy to use and ever since I discovered the Workbench tool I have been a big fan.
5. Create an account for BitBucket. BitBucket allows you to create online repositories (including issue tracking and wikis) for your projects using both Git and/or Mercurial. On top of that BitBucket allows you to create unlimited free, private and public repositories.
6. When logged in, create a repository for the sources of our application:
   
   I named it appharbor_demoapp and used these settings (the language setting is not very important, it is primarily meant for public projects):
7. Go back to AppHarbor and look at the properties of the application. Show the Create build URL, and copy it:
   
8. In BitBucket navigate to the Admin page of the repository:
   
9. In the menu on the left select Services:
   
10. Select the POST option and click Add service:
    
11. In the URL box enter the URL that you copied from AppHarbor and press Save setting:
    
12. Next you will also have to grant the user apphb read access to the project. Click Access management in the menu and add the apphb user to the project and grand read access.
13. This wires up BitBucket and AppHarbor. When you push sources to the BitBucket repository they will automatically be forwarded to AppHarbor.
14. In BitBucket copy the url of the repository:
    
15. Now right-click in the folder where you normally keep your Visual Studio projects and select TortoiseHG | Clone…
    
16. Paste the repository’s url to the Source input and add the name of the folder that will contain the Visual Studio Solution to the Destination path. I added “DemoApp” and press Clone. You will be propted for your password. This will bring the repository from BitBucket to your local folder.
    
17. The folder DemoApp will now look like this:
    
18. Start Visual Studio and create a Silverlight application and make sure the solution and its projects are added to the folder where we created the repository:
    
19. Use the default options in this dialog, this will be the web application that will use the Silverlight app and will be hosted on AppHarbor:
    
20. After the projects have been created, delete the html page from the web project and rename the aspx page to default.aspx and make it the Start page of the project.
21. Open the MainPage.xaml and add a button and a TextBlock to the Silverlight page.
22. Double-click the button to add an eventhandler for the Click event and code it like this:

    namespace SLDemo
    {
    public partial class MainPage : UserControl
    {
    public MainPage()
    {
    InitializeComponent();
    }
    private void setTimeButton_Click(object sender, RoutedEventArgs e)
    {
    timeTextBlock.Text = DateTime.Now.ToLongTimeString();
    }
    }
    }
    

23. The XAML I used looks like this:

    <UserControl x_Class="SLDemo.MainPage"
    ><img style="padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px" src="https://blogs.infosupport.com/wp-content/uploads/2011/10/image_thumb16.png" alt="image" width="335" height="117" border="0" /></a></li>
    	<li>If this works, close Visual Studio, open the solution folder in the explorer and right-click to open the ToirtoiseHG Workbench. As you can see there are quite a few files (those pink ones) that should not be in version control because they are in the obj and bin folders. To prevent these files from being added to our source repository we’ll add a special file to the solution folder named <em>.hgignore </em>It is just a text file and mine contains this text:
    <div class="wlWriterSmartContent" style="margin: 0px;float: none;padding: 0px">[sourcecode language="text"]
    # Ignore file for Visual Studio 2010
    # use glob syntax
    syntax: glob
    
    # Ignore Visual Studio 2010 files
    *.obj
    *.exe
    *.pdb
    *.user
    *.aps
    *.pch
    *.vspscc
    *_i.c
    *_p.c
    *.ncb
    *.suo
    *.tlb
    *.tlh
    *.bak
    *.cache
    *.ilk
    *.log
    *.lib
    *.sbr
    *.scc
    [Bb]in
    [Dd]ebug*/
    obj/
    [Rr]elease*/
    _ReSharper*/
    [Tt]est[Rr]esult*
    [Bb]uild[Ll]og.*
    *.[Pp]ublish.xml
    

24. After creating this file go back to the Workbench and refresh the file list, The .hgignore file shows up and all the output files are now being ignored:
    
25. Check both the .hgignore and .sln files.
26. Type some descriptive comment for this version (or stick to the traditional but very bad: “Initial commit”) and press Commit (if the Workbench asks whether it should add unversioned files, allow them to be added):
    
27. You now created a (first) new version of the sources. To push the sources to BitBucket press Push:
    
28. Accept all the defaults (removing authentication information etc.) and enter your password for BitBucket. If all goes well you should see something like this:
    
29. But wait, there is more! Go to AppHarbor and open the DemoApp application. After the sources had been pushed to BitBucket, BitBucket pushed the sources to AppHarbor. AppHarbor then tried to compile the Release version of the sources, ran the unit tests (if present) and if there were no errors in building or from the unit tests the application was deployed:
    
30. Below the Build part of the page there is a link to the application on the web. How cool is that?

Note: if you want to host more applications on AppHarbor or want the application to be scaled to more servers you’ll need to pay for that, only the first instance is free.

The next post in this series will add free cloud storage to our application.

Share this