Config management with Rake for .net projects.

In pretty much every project you work on, you are going to need to control configuration files for multiple environments (perhaps Development, Test, UAT, Production, etc.)

In the .net world, configuration tends to be held in config files (app.config / web.config), usually in the root of your projects. There are various ways to deal with multiple config files – you can create custom build configurations in visual studio, or source control multiple configuration files, making use of the "file" attribute in .net config files. Both of these methods can result in a pile of different config files in your project which will need to be maintained as new items are added to your configuration.

Furthermore these methods mean that the developer has access to and ultimately, responsibility for updating and source controlling the configuration of each environment the application gets deployed to. This is not always desirable, as, if the test environment owner renames a url, or moves a database, the developer has to update their config files for them. Further more, it means the developer often has access to things that perhaps they have no business seeing (Live DB connections strings etc).

Configuration – a better way

It seems it would be better if environment owners, or configuration managers could own and maintain configuration settings for their own environments. This makes sense from a management perspective and a security perspective.

In an ideal world, a developer would create a build and distribute it to be deployed to any appropriate environments. The environment owners could then drop in their own configuration file, and in a simple step, configure the build for their own environment. The following solution allows for just that.

Enter Rake and Configatron…

Installing ruby rake and configatron

First things first – we need to install ruby, rake and configatron on our machine. I recommend installing ruby with the one click windows installer:

http://rubyinstaller.org/

Once installed, open a command prompt and type

gem install rake

then

gem install configatron

And we're done.

It's all just find and replace…

Download a demo solution here

In the following example, we will set up rake and configatron to manage the config for a .net based web project. We are keeping it simple by keeping all configuration items in the web.config, but this is by no means a constraint – we could have separate email.config / anythingelse.config files if we wanted.

We're going to use the standard web config file that you get when you create a .net web (or MVC) project to hold our development settings. An excerpt from the web.config file, containing some settings that would change between different environments can be seen below:

The first thing we need to do is create a copy of our web.config file. We will rename it web.configatron.

This will hold variable names in place of the values that change between different environments. The same excerpt as that taken for the web.config file above can be seen for the web.configatron file, below:

The highlighted areas show the values from the web.config have been replaced by variables. These are place holders that will eventually be replaced by the various values for each environment.

The next step is to add a new file to the root of our solution called RakeFile.rb:

This file is going to contain our rake script, which will contain the code to configure our application. If we want we can also add code in here to build the projects, and even create single step deployments to actually push the final configured build out to the appropriate servers. For now, we will just concentrate on the code required to take care of the configuration for us.

We now need to add another file to our solution. We'll call it test.yaml. This will hold the values we want to push into our config file for the test environment.

This file will be in the yaml format, but you don't really need to know too much about that… It is simply a human friendly way to store data in a readable format.

Currently our web.config holds two values that are different in each environment: The supprtEmail app setting, and the ApplicationServices connection string. The yaml file to hold these settings looks as follows:

Writing our Rake script

When we are done, we will be in a situation whereby we can open a command prompt at the root of our build and run the command:

rake configure_all_projects environment=[[your environment name]]

Which will completely configure the build for the environment specified in the [[your environment name]] variable.

We need to define two Rake tasks in the RakeFile.rb. The first will allow us to pass in the environment variable in the command line specified above:

The script should be fairly simple to read, even if you've never seen any ruby before. Basically, we check to make sure the user entered an environment variable when they ran the command line. If they did, we check to make sure there is a corresponding yaml file containing settings for that environment. If there is, the task is complete.

Now our second Rake task:

The second line, where we define our task looks as follows:

task :config_all_projects => :setEnvironmentVariables

The little arrow sign points to the name of the first task we defined. This simply means that the setEnvironmentVariables task is a dependency of the config_all_projects task. In real terms, this means that if we run the config_all_projects task, it will run the setEnvironmentVariables task first.

Following this, the script searches for all files in the project with the file extension .configatron.

For each of these files, it reads through them, and matches any text in the format:

#{configatron.**.**}

And replace it with the corresponding value in the yaml file.

If at any point it comes across a value specified in the configatron file that does not have a corresponding entry in the yaml file, it will stop and tell us we have a missing value.

We now have everything we need in place to configure a build for a specific environment.

To test the configuration script, open a command prompt to the root of the solution and run the following command.

rake config_all_projects environment=test

If you now check your web.config file, it should contain the values from the test.yaml file, rather than the dev values that were in there before.

If we want a new environment, say UAT, take a copy of the test.yaml file and call it UAT.yaml. Edit it to contain the UAT email address and connection string. Now from the command prompt, run

rake config_all_projects environment=UAT

Your web.config should now contain the appropriate values for UAT…

You should be able to see from this, you as a developer can deliver a build. An environment owner can drop their own MyEnvironment.yaml file into the root of the build and run rake. This will completely configure the app with the settings in their own yaml file.

YouTube, MS MVC and jQuery

In this entry I’m going to make a MS MVC PartialView (usercontrol) which will take in a search term and render a YouTube video down to the page.

You can see how this will look on TV Shout, where I’ve used it to display film trailers on the listing pages of films.

You should be able to drop the code into your MVC project and instantly get some YouTube integration on your website.

If you want you can grab the code for the tutorial here.


The Google Data API

First up we’re going to need some references to the Google Data API.

“The Data API allows a program to perform many of the operations available on the YouTube website. It is possible to search for videos, retrieve standard feeds, and see related content. A program can also authenticate as a user to upload videos, modify user playlists, and more.”

We’re going to keep it simple here, and just use the API to query YouTube to look up videos.

Grab the .Net API Library from Google code. We need to add references in our project to:

Google.GData.Client.dll
Google.GData.Extensions.dll


The Controller and Search Code

Create a function in your controller (not the best place for it, but for brevity...) called GetFeed. This method will run off to YouTube and return an AtomFeed with a specified number matching videos:

Private Shared Function GetFeed(ByVal url As String, ByVal start As Integer, ByVal number As Integer) As Google.GData.Client.AtomFeed
  Dim query As New FeedQuery("")
  Dim service As New Service("youtube", "exampleCo")
  query.Uri = New Uri(url)
  query.StartIndex = start
  query.Query = Replace(query.Query, "%20", " ")
  query.NumberToRetrieve = number

  Dim myFeed As Google.GData.Client.AtomFeed = service.Query(query)
  Return myFeed
End Function

Next, we need to add the controller function which will return a PartialViewResult. We will be hitting this function via an AJAX call from the client web page, and it will be sending back the HTML to our page required for displaying the video player.

Public Function YouTubeVideo(ByVal searchTerm As String) As PartialViewResult
  Dim url = "http://gdata.youtube.com/feeds/videos?q=" + searchTerm
  Dim myFeed = GetFeed(url, 1, 1)
  Dim idSimple = ""
  If myFeed.Entries.Count > 0 Then
      ' We just need the unique ID of the video - grab it from the unique URI
      Dim uriSection() = myFeed.Entries(0).Id.Uri.ToString.Split("/")
      idSimple = uriSection(uriSection.Count - 1)
  End If

  Return PartialView("YouTubeVideo", idSimple)
End Function

The Views

Next up we need to add a PartialView for the video mark-up. Add a user control to your page. We want to set the Model of this user control to be of type string:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of String)" %>
<%  If Not Model = "" Then %>
<div id="video">
<object width="540" height="444">
<param name="movie" value="http://www.youtube.com/v/<%=Model %>?color1=0xb1b1b1&color2=0xcfcfcf&hl=en&feature=player_embedded&fs=1">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/<%=Model %>?hl=en&feature=player_embedded&fs=1"
type="application/x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="540" height="444">
</object>
</div>
<%  End If%>

In this user control, we will set the Model to the Unique ID of the YouTube Video. This value will then be injected into a YouTube URL creating something similar to the following:

http://www.youtube.com/v/WhBoR_tgXCI

(May as well watch the above video whilst you’re reading the rest of this... DubFX is heavy, I’m sure you’ll agree)


Showing a video on your page

We are now at the stage that your shiny new YouTube user control can be used in your web app.
We just need to create an AJAX call from the particular view we want to place the video in, to our controller method : YouTubeVideo()

Add a link to jQuery in the Head of your view (as if you haven’t got one there already) and a div to place the video in.


Next up we add the jQuery script to call the

<script type="text/javascript">
$(document).ready(function() {
  $.get('/[[YourControllerName]]/YouTubeVideo?SearchTerm=[[YourSearchTerm]],
          function(data) {
              $('#youtubeVid').html(data);
              return false;
          });
});

</script>

And that’s you done. YouTube videos integrated!

The code here is simplified and could probably do with some tidying up if you want to use it in a production system.

Fancy validation pointer messages without images

Here's a neat little CSS trick that allows you to create validation messages which point to the relevant field without the use of images.

It basically makes use of the CSS border property to make pure CSS shapes. In this case, we make a triangle connected to a rectangle giving you a pleasant arrow shape in which to hold your validation message.

Here's what the effect looks like:

And here's some mark-up for you:

.valPointer {
border-color: transparent #e9e9e9 transparent transparent;
border-style: solid;
border-width: 14px 14px 14px 0px;
height: 0px;
width: 0px;
float: left;
}

.valBody {
background: #e9e9e9;
float: left;
height: 28px;
width: 146px;
font: normal 11px arial;
padding: 0 2px 0 5px;
}

<div id="errorArrow" >
<span class="valPointer"></span>
<span class="valBody">This is mandatory. Please enter a value.</span>
</div>

Good little trick and saves you busting Photoshop open. What do you think? Useful? Would you use it?

Thanks to ChrisM for doing some research on this one for me!

Creating separate views to target mobile devices in MS MVC

This is a small how-to on creating separate view files to target mobile phones in your MS MVC websites. By the end of the article, I will have shown how to create new directories within your view folders which target various mobile devices. The views make use of the same controller files to deliver content to specific devices.

The Mobile Device Browser File

First up, I am going to add the Mobile Device Browser file to my project:

Project Description
The Mobile Browser Definition File contains definitions for individual mobile devices and browsers. At run time, ASP.NET uses the information in the request header to determine what type of device/browser has made the request.

This open source file takes care of doing the work of figuring out what kind of device is accessing the website. It allows you to target many different mobile devices, and takes out a lot of the hard work of for targeting specific devices.

To add the Mobile Device Browser File to your project, right click on your website project file in VS, and

Add > Add ASP.NET Folder > App_Browsers

Create another folder insider App_Browsers called devices

Drop the mobile.browser file from the Mobile Device Browser File Download in the newly created devices directory.

Using this file I can target the devices I want to support without having to know the specifics of what those devices send in their headers. I can just use the Request.Browser property to tailor which view I want to return.

Now I am going to put together the directory structure I will be using to target different devices. I have decided to use the following directory structure within my views section:

· Home

· Mobile

o iPhone

§ Index.aspx

o BlackBerry

§ Index.aspx

o Index.aspx

· Index.aspx

Basically, a standard request from a desktop computer will be served up the Home > index.aspx file. A request from an iPhone will be served up Home > Mobile > iPhone > Index.aspx.

A mobile device which does not have a specific directory in the mobile directory will be served the Home > Mobile > index.aspx view.

The Custom View Engine

Next up we are going to create a Custom View Engine, to override the standard MVC view Engine.

Our custom view engine will take care of routing request from mobile devices to the correct views.

Public Class CustomViewEngine

Inherits WebFormViewEngine

Public Overloads Overrides Function FindView(ByVal controllerContext As ControllerContext, ByVal viewName As String, ByVal masterName As String, ByVal useCache As Boolean) As ViewEngineResult

' Logic for finding views in your project using your strategy for organizing your views under the Views folder.

Dim result As ViewEngineResult = Nothing

Dim request = controllerContext.HttpContext.Request

' iPhone Detection

If request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) > 0 Then

result = MyBase.FindView(controllerContext, "Mobile/iPhone/" & viewName, masterName, useCache)

End If

' Blackberry Detection

If request.UserAgent.IndexOf("BlackBerry", StringComparison.OrdinalIgnoreCase) > 0 Then

result = MyBase.FindView(controllerContext, "Mobile/BlackBerry/" & viewName, masterName, useCache)

End If

' Default Mobile

If request.Browser.IsMobileDevice Then

result = MyBase.FindView(controllerContext, "Mobile/" & viewName, masterName, useCache)

End If

' Desktop

If result Is Nothing OrElse result.View Is Nothing Then

result = MyBase.FindView(controllerContext, viewName, masterName, useCache)

End If

Return result

End Function

End Class

Applying the Custom ViewEngine

Now that I have my Mobile View folders and mobile views created, and have implemented a Custom ViewEngine, I can go ahead and apply the custom view engine.

To do this we’ll need to clear any existing ViewEngines and add a new instance of the ‘CustomViewEngine”. This needs to be done within the Application_Start method in the Global.asax.

' Replace the Default WebFormViewEngine with CustomViewEngine

System.Web.Mvc.ViewEngines.Engines.Clear()

System.Web.Mvc.ViewEngines.Engines.Add(New CustomViewEngine())

And we're done!

That's everything you need to do... Hit the site with your mobile phone, and IIS will serve up your customised mobile views. Got to love the MS MVC Framework!

This post was inspired by a stackoverflow answer given by Dale Ragan. Cheers Dale!

Draggable scrolling list with jQuery

DraggableList is a jquery plugin for making a list or other html element scroll within a draggable container.

Check out a demo here

Simply point the pluggin at an unordered list (or other element), specify a containment size and the list will become draggable. Drag the list up and down to scroll its contents.

Example Usage

<style type="text/css">
   body{ font-family:Georgia;}
   .myList {list-style:none; margin:0px; padding:0px;}
   .myList li{ height:50px; border-bottom:solid 1px #dedede; margin:0px; padding:0px 2px 0 2px;}
   .draggableList{ border:solid 1px black;}
</style>

<script type="text/javascript">
$(document).ready(function() {
$('.myList').draggableList({height:150, listPosition:0});
});
</script>

<ul class="myList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

Options

The plugin has a bunch of options with default values as follows:

        cursor: 'n-resize',
    height: '150',
    width: '100',
    listPosition: '0',
    panelCssClass:'draggableList'

cursor

CSS cursor style on hovering over the list

height

Numeric-value - pixels The height of the element which will hold the list (it's overflow will be set to hidden)

width

Numeric-value - pixels The width of the element which will hold the list

listPosition

Value between 0 and 100 : Where abouts the list will be positioned relative to it's container. When 0, the list will appear scrolled right to the top, so the first element will be at the top of the container. When set to 100 the list will be scrolled right to the bottom

panelCssClass

Name of the css class that is added to the container item. Used to style the container.

Dependancies

DraggableList dependancies on:

• jQuery
• ui.core
• ui.draggable

Source

Head across to http://code.google.com/p/draggablelist/ and grab the plugin now.

And if anyone uses the list on one of their projects, I'd love to hear about it and get feedback on how it could be improved...

Cruise control with MSBuild - Switching a reference on the build server

Background

This article is the result of the following problem I encountered a few days ago: We have a piece of software which references a third party dll. We had to deploy the software to a customer with a 64bit server.

This isn’t a problem for the code written in house, as it is all managed so runs in a 64bit environment no problem. Unfortunately, the third party dll we are using is 32 bit specific. There is a 64 bit version, but in order to develop against the library we have to reference the 32 bit dll (we all work on 32 bit machines).

The build setup

First off, we keep all third party dlls within a folder in our solution, so anyone can grab the source code from VSS (I know...) and compile it.

We run Continuous Integration using Cruise Control and MSBuild to do the building by reading our solutions files. On every check-in, a build is triggered, resulting in a build containing everything the software needs, ready to deploy.

Fixing the problem

First we deployed the software to a 64 bit server and tried simply copying over the 32 bit dll with the 64 bit version – they are both the same version number, so with fingers crossed we fired up the app. No such luck:

The located assembly's manifest definition does not match the assembly reference

Kind of expected that to be honest...

We then restructured our external references folder ‘BinRefs’ a little, and added the 64 bit dlls to the solution:

Then changed the reference in the project file to point to the new location for the 32 bit dll.

The plan was to get the build server to open the project file containing the reference to the 32 bit dll and change the path to the dll so it points at the 64 bit version before building the solution.

VS2008 project files hold their references to dlls as below:

So I simply needed to replace the string

“..\..\BinRefs\32Bit\SomeLibrary.dll”

With the relative path to the 64 bit dll

“..\..\BinRefs\64Bit\SomeLibrary.dll”

Before MSBuild starts compiling.

A quick and dirty VBScript with a batch file to kick it off takes care of the job of replacing the HintPath in the project file:

VBScript (Replace32bitDLL.vbs)

dim fso
dim txtStr
dim strHolder
dim strFileToFix

' Replace reference to SomLibrary in MyProject project
strFileToFix = "Build64\Services\PDF\MyProject.vbproj"
set fso = wscript.createobject("scripting.filesystemobject")
set txtStr = fso.opentextfile(strFileToFix,1,false,0)
strHolder = txtstr.readall
txtStr.close
set txtStr = nothing
strHolder = replace(strHolder,"..\..\BinRefs\32Bit\SomeLibrary.dll","..\..\BinRefs\64Bit\SomeLibrary.dll",1,-1,vbtextcompare)

set txtStr = fso.createtextfile(strFileToFix,true,false)
txtStr.write(strHolder)
txtStr.close
set txtStr = nothing

Batch Script (Replace32bitDLL.cmd)

ECHO StartingDllReplace
CScript Replace32bitDll.vbs
ECHO FinishedDllReplace

Finally a task is added to the project section in the Cruise Control config file before the call to MSBuild (shown in bold):

<tasks>
<exec>
<baseDirectory>E:\Dev\Development</baseDirectory>
<executable>Replace32bitDLL.cmd</executable>
</exec>

<msbuild>
&msb3Exe;
<workingDirectory>E:\Development\Build64</workingDirectory>
<projectFile>MySolution.sln</projectFile>
&releaseBuildArgs;
<targets>Build</targets>
&msBuildLogger;
</msbuild>
</tasks>

And you’re sorted. Check-ins result in builds ready to be deployed to 64 bit machines.

Announcing TellyFeed - Beta Release

TellyFeed - Never miss another film when it's on TV!

What it’s all about?

TellyFeed was a little idea that came from a FaceBook app I built a couple of years ago to learn about the FaceBook api.

The idea came about as a way to find out when films were gonna be on tv (which is pretty much all I personally use it for) and it seems to do a relatively good job.

Basically, you enter a list of film or TV programme titles and TellyFeed can let you know if they’re gonna be on TV over the next 5 or so days. Fairly handy if you’ve got a fancy TV recording Freeview box and want to build up a little film collection.

Just hook up your RSS reader and you’ll never miss that film you’ve been meaning to watch.

So why did I build it?

I just finished reading Evans’ Domain Driven Design and decided that if I wanted it to sink in, I should probably try it all out.

I built the application basically as a controlled experiment... It’s a fairly simple application with a few business rules and concerns. I knew exactly what I wanted it to do, so I could sort of play the role of developer and domain expert.

I learnt a lot (Dependency Injection, the Repository Pattern, A fair bit more knowledge of the MVC framework, a good old bit about domain modelling, a bit about nHibernate, SubSonic SimpleRepository and quite probably a lot more.) which is good.

I'll be adding some blog posts over the coming weeks outlining some of the things I learned, and how I went about achieving some of the functionality on the site, so stay tuned!

Enjoy the site I hope you find it useful.