KitchenPC

During the last month, I’ve been working on paying off some of the technical debt that has been collecting interest over the course of KitchenPC’s development. Most of these have been stability changes, or just things that, when fixed, remove roadblocks to a smoother development process. I’d like to go over these in a three part blog series that, like the Hitchhikers Guide to the Galaxy trilogy, will consist of five parts.

Part 5/3: A Better Way To Deploy

During the beta, I was more focused on code and features than boring process and tools.  One of the things I never got around to was any sort of modern deployment system to push new changes out to production.  This wasn’t a huge deal, since I only had a single web server and didn’t have enough traffic to really care if I had to bring down the site for a couple minutes.

The original technique for pushing out changes is rather embarrassing, but I’ll share it with you anyway.  I’d go out on a limb and say there are plenty of entrepreneurs who do the exact same thing.

First, I ran MSBuild (I had previously used nAnt but switched to MSBuild for a variety of reasons) to build all the individual KitchenPC projects.  The MSBuild script would also crunch the CSS and JavaScript files using the YUI Compressor.  Everything would be copied out to a directory called /Build which had a subdirectory for binaries, a subdirectory for site content, and a subdirectory for the KitchenPC Queue service which also runs on the web server.  Building the entire site would take around 20 seconds.

Next, I’d zip up everything.  If I was making a lot of changes to the site, I’d just zip up the entire Build directory.  However, sometimes I was just making some script changes or binary changes, and would just zip up the files that were changed.  Then, I’d Remote Desktop (we need a better transitive verb for that) into the production web server, and transfer my files over.  Originally, I put them up on my own private web server running off my home network and just use wget to download the file, but later on I started using FTP instead and manually uploaded the files to the web server.

From the desktop, I’d unzip the package and copy out the files, usually running an iisreset when everything was in place.

So, in other words, everything was manual.  It would usually take five or ten minutes to get everything deployed.

After launch, I finally had time to think about this process and devise a better solution for pushing changes out.  Ideally, I wanted to do this without having to Remote Desktop into production web servers, and also be able to push changes out with a single command line tool.  A bonus would be the ability to not have to take the site down, lose any traffic, or reset IIS when there were no binary changes being deployed.

On the Microsoft technology stack, WebDeploy is the cutting edge solution for doing all of the above, and more.

WebDeploy is a protocol that’s able to compare a set of files on a source and destination, and synchronize those files automatically.  It can be used for synchronizing files between two web servers (making the provisioning of more web servers extremely efficient) or synchronizing files between a development or staging environment and a production web server.  It could also be used to create backups of a web server and its configuration by dumping an entire IIS application to a ZIP package, or a raw directory.  It’s far superior to FTP, as it’s smart enough to compare the timestamps on files to figure out exactly what has changed between a source and destination, and only transfer that content over the wire. WebDeploy is used on Windows Azure, as well as the Microsoft WebMatrix platform, and also integrated with recent versions of Visual Studio. Basically, WebDeploy is where it’s at.

WebDeploy runs as an IIS extension, and can be installed easily using the Microsoft Web Platform Installer.  When installed on a machine without IIS (such as a development box,) only the client side tools (such as MSPublish.exe) are installed so deploying changes from the command line to a remote IIS box can be accomplished.  Also, Visual Studio 2010 and above will install MSPublish.exe automatically, since the Publish feature in Visual Studio calls MSPublish.exe under the covers when publishing a site using WebDeploy.

As it would not make a very good blog post to walk you through setting up WebDeploy on your web servers, I’ll refer you to this page which will walk you through the steps.

If you’re running Visual Studio 2010 or 2012, setting up Web Deploy on your web server is really all you need to do.  Once you configure WebDeploy on a site, it will export a settings file which can be used directly in Visual Studio.  However, since I’m a command line freak (plus, I was still running VS2008 at the time,) I decided to integrate WebDeploy into my MSBuild scripts instead, and then be able to build and deploy changes in a single command.

To use MSDeploy from within an MSBuild file, you’ll first want to setup some properties within your project.  These properties should be defined directly under the <Project> tag so they’ll be global to all tasks.  I define a few properties to hold various publishing settings, and support the ability to publish to both a staging and production web server:

  <PropertyGroup>
    <ArchiveDir>$(MSBuildProjectDirectory)\$(BuildDir)</ArchiveDir>
    <AppHost>KitchenPC</AppHost>
    <UserName>publish_acct</UserName>
    <Password>secret</Password>
  </PropertyGroup>

  <Choose>
    <When Condition="'$(Configuration)'=='Staging'">
      <PropertyGroup>
        <PublishServer>https://staging</PublishServer>
      </PropertyGroup>
    </When>
    <When Condition="'$(Configuration)'=='Release'">
      <PropertyGroup>
        <PublishServer>https://www.kitchenpc.com</PublishServer>
      </PropertyGroup>
    </When>
  </Choose>

Let’s go through each of these properties:

ArchiveDir: For me, this is simply where I build my site to.  The directory structure needs to be identical to the way MSPublish exports your site, so you can run:

msdeploy -verb:sync -source:appHostConfig=”Default Web Site”,computerName=server -dest:archiveDir=c:\Test

To dump your site to a temporary directory on your hard drive to see.  Replace Default Web Site with the name of your site in IIS, and replace server with the computer name or IP address of the web server.

For me, it puts all the files in /Content/c_C/Website but this might be different for you.  It’s also possible MSDeploy has the ability to define exactly how the folder layout should look, but I’m not yet enough of an expert to know.  Also note that Visual Studio will do all this packaging for you.

AppHost: This is the name of your application in IIS.  This is probably Default Web Site if you haven’t mucked with the default IIS settings, but for me this is KitchenPC.

UserName: This is the username MSPublish will try to connect to your web server with.  This might be Administrator if you haven’t granted anyone else access, but it’s advisable to setup a user account just for publishing.

Password: This is the password for the username above.

It may or may not be necessary to hard code all these publishing settings into your MSBuild script.  Visual Studio is able to store these settings in a settings file, but from what I can tell, those settings are extracted and passed directly into MSDeploy.exe when you publish.

I also have a conditional property called PublishServer which changes depending on the build configuration.  If I’m building the Staging configuration, I’ll publish to my local staging server.  If I’m building in Release mode, I’ll deploy to production.

Next, you’ll need to define a new Target for your deploy task:

  <Target Name="Publish" DependsOnTargets="Build">
    <Message Importance="High" Text="Deploying to $(PublishServer)" />

    <Exec
      WorkingDirectory="C:\Program Files\IIS\Microsoft Web Deploy V3\"
      Command="msdeploy.exe -verb:sync -source:archiveDir=$(ArchiveDir) -dest:appHostConfig=$(AppHost),computerName=$(PublishServer):8172/msdeploy.axd,authType=Basic,userName=$(UserName),password='$(Password)' -allowUntrusted" />
  </Target>

Notice this target depends on the Build task, which compiles the site with the proper configuration, crunches all the CSS and JavaScript files, and moves everything to the correct output directory using the right folder hierarchy.

It then simply executes the msdeploy.exe command with the appropriate command line arguments. Note if you’re using a self-signed SSL certificate on your server (which the Web Platform Installer will create by default), you’ll have to use the -allowUntrusted command line parameter as well. Hopefully, with a bit of tweaking, this will get you started on your own solution!

What About Web.config files?

Glad you asked!  Another very cool thing about Visual Studio 2010 and above are web.config transforms.  In the past, I just had separate files for various web.config files (such as prod.web.config and staging.web.config), and my MSBuild script would copy the correct one to the build output directory.  When I zipped up the site, the production web.config would be included.

The correct way to do this is using a transformation, which is basically an XSLT file that contains instructions on transforming your default web.config file to a file suitable for a specific environment.  Visual Studio takes care of all of this for you if you’re using a Web Application Project, allowing you to right click on your web.config file and add a new configuration.

However, the actual code for doing these transforms is neatly packaged up in managed libraries, and can be accessed as an MSBuild task.  Since, again, I’m a command line freak this is the approach I took.

The first step is to reference the Microsoft.Web.Publishing.Tasks.dll assembly in your MSBuild script.  This can be done by adding the following line directly under the <Project> node:

  <UsingTask TaskName="TransformXml"
    AssemblyFile="C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\Web\Microsoft.Web.Publishing.Tasks.dll"/>

I just hard coded in the path, but you could easily make this an environment variable, or copy the DLL to a more appropriate directory.

Once this assembly is referenced, you can start using build tasks defined within that library. This is ridiculously easy:

    <TransformXml
      Source="KPCServer/web.config"
      Transform="KPCServer/web.$(Configuration).config"
      Destination="$(DeployDir)/web.config" />

Basically, we take the default web.config checked into your source tree, run the appropriate transformation against it (such as web.staging.config or web.release.config) and output the file to the correct output directory; in my case, the deployment directory that MSPublish picks up.

I won’t get into the details about building these transformations, since there’s tons of documentation online.

Once this task is added into your build target, then we’ve nearly got a complete build system in place.  Running the deploy target will first build your site, copy and transform your web.config file over, and run MSDeploy.exe to publish your site (copying only the files that have changed, of course!)

There’s one more thing we want to do.  Minimize CSS and JavaScript files.

Crunch Time!

Previously, I used YUI Compressor, a Java utility developed by Yahoo! to minimize JavaScript and CSS files.  It’s fantastic and pretty much the standard in the industry.  I would just execute this utility directly from an MSBuild script using an Exec task and call it good.

However, this time I decided to try out the .NET port of YUI Compressor, which is called YUICompressor.net.  The author claims the algorithm is identical, and the results should be nearly byte-for-byte the same.  It can be easily installed with NuGet and it also has MSBuild tasks included.

One drawback is the documentation is wildly out of date!  I had to spend a lot of time in ildasm digging through the assembly to figure out what was going on.  Hopefully, I can provide some better documentation here for people who are attempting to integrate YUI Compressor .NET into their MSBuild scripts.

The first step is to reference the build tasks.  There’s two of them, one for JavaScript minification and one for CSS files:

  <UsingTask
    TaskName="JavaScriptCompressorTask"
    AssemblyFile="packages\YUICompressor.NET.MSBuild.2.1.1.0\lib\NET20\Yahoo.Yui.Compressor.Build.MsBuild.dll" />
  <UsingTask
    TaskName="CssCompressorTask"
    AssemblyFile="packages\YUICompressor.NET.MSBuild.2.1.1.0\lib\NET20\Yahoo.Yui.Compressor.Build.MsBuild.dll" />

These directories happen to be where NuGet installed the binaries, but you can probably put them wherever.

I then made two separate MSBuild tasks, one for JavaScript and one for CSS.  We’ll go through the JavaScript task first:

  <Target Name="CrunchJs">
    <!-- Select all kpc*.js files -->
    <CreateItem Include="$(DeployDir)/scripts/kpc*.js">
      <Output TaskParameter="Include" ItemName="JsCrunch" />
    </CreateItem>

    <!-- Copy them to .debug files since JavaScriptCompressorTask cannot read and write to the same file -->
    <Copy SourceFiles="@(JsCrunch)" DestinationFiles="@(JsCrunch->'%(Identity).debug')" />

    <!-- Compress the .debug files, and delete them afterwards -->
    <JavaScriptCompressorTask
      SourceFiles="%(JsCrunch.Identity).debug"
      ObfuscateJavaScript="True"
      EncodingType="Default"
      LineBreakPosition="-1"
      LoggingType="None"
      DeleteSourceFiles="Yes"
      OutputFile="$(DeployDir)/scripts/%(Filename)%(Extension)"
      />
  </Target>

First, we select all the files we want to crunch. In my case, this is anything in the output directory that matches kpc*.js (as I give all my script files a kpc prefix). Next, we copy each file to a new file with .debug appended to the end. For example, we copy kpccore.js to kpccore.js.debug and kpchome.js to kpchome.js.debug. We do this because YUI Compressor .NET is not capable of using the same filename for both the input and output files, and I want to simply compress all the files in my build directory.

Lastly, we run the JavaScriptCompressorTask task. Note YUI Compressor .NET can only handle a single output file. While it can handle an enumeration of items for the SourceFiles parameter, it can only output them as a single file. For example, I can pass in kpccore.js, kpchome.js, kpcmenu.js, and all my other files as the SourceFiles parameter. However, it will not output separate crunched files. It will output everything to a combined file, such as kpcall.js. I don’t really like this, since I don’t need to include kpchome.js on any page besides the home page, or kpcqueue.js on any page besides the queue page.

For this reason, I use MSBuild batching to call the JavaScriptCompressorTask task multiple times, one for each item in JsCrunch. This is indicated using the percent sign prefix, %(JsCrunch) rather than @(JsCrunch), which would send in all the files as a single input parameter.

So, I run the JavaScriptCompressorTask on each file within the JsCrunch item set, appending the .debug prefix to the end since the input file can’t be the same as the output file. I also add the DeleteSourceFiles parameter to delete the temporary .debug files after I’m done.

The CSS task looks very similar:

  <Target Name="CrunchCss">
    <!-- Select all *.css files -->
    <CreateItem Include="$(DeployDir)/styles/*.css">
      <Output TaskParameter="Include" ItemName="CssCrunch" />
    </CreateItem>

    <!-- Copy them to .debug files since CssCompressorTask cannot read and write to the same file -->
    <Copy SourceFiles="@(CssCrunch)" DestinationFiles="@(CssCrunch->'%(Identity).debug')" />

    <!-- Compress the .debug files, and delete them afterwards -->
    <CssCompressorTask
      SourceFiles="%(CssCrunch.Identity).debug"
      EncodingType="Default"
      LineBreakPosition="-1"
      LoggingType="None"
      DeleteSourceFiles="Yes"
      OutputFile="$(DeployDir)/styles/%(Filename)%(Extension)"
      />
  </Target>

I’ll let you figure that one out, since it’s basically a copy of the JavaScript task, only using the CssCompressorTask task instead.

The last step is running this target after I build. I add the following lines to the end of my Build target:

    <!-- Crunch Files -->
    <Message Importance="High" Text="Crunching JavaScript/CSS Files..." />
    <CallTarget Targets="CrunchJS;CrunchCSS" />

This basically instructs the Build target to call both the CrunchJS and CrunchCSS targets after it finishes, minimizing the JavaScript and CSS files that have been copied to the build output directory.

Wrapping Everything Up in a Bow:

Since I use PowerShell for my build environment, I’ve also created a new PowerShell function to build and deploy the site to either staging or production:

function Publish
{
   if ($args.Count -gt 0)
   {
     switch ($args[0].ToUpper())
     {
        "STAGE"   { msbuild .\build.xml /t:Publish /p:Configuration=Staging /verbosity:minimal }
        "RELEASE" { msbuild .\build.xml /t:Publish /p:Configuration=Release /verbosity:minimal }
     }
   }
   else
   {
      Write-Host "Please specify either STAGE or RELEASE build.`n"
   }
}

Now, I can simply type Publish Stage or Publish Release at the command prompt to run the Publish target in build.xml.  This will build everything in the appropriate configuration, transform the correct web.config and copy that to the deployment directory, minify everything using YUI Compressor .NET, and then publish that whole package to the correct server using MSDeploy.exe.  Magic!

Hopefully some of this has inspired you to take a look at your current deployment strategy and think about some improvements.  What I have is far from perfect, but it was a solid weekend of work and far superior to what I had before.  Combined with the fact that my app starts nearly immediately now, and the fact that only modified files are copied out, I can now deploy new versions of the site extremely quickly without losing any traffic.  Requests that are coming in while I deploy would probably just see a couple second lag while the new binaries are loaded and the app pool recycles.

During the last month, I’ve been working on paying off some of the technical debt that has been collecting interest over the course of KitchenPC’s development. Most of these have been stability changes, or just things that, when fixed, remove roadblocks to a smoother development process. I’d like to go over these in a three part blog series that, like the Hitchhikers Guide to the Galaxy trilogy, will consist of five parts.

Part 4/3: Out with the old, in with the new

I’ve been using Visual Studio 2008 since the very beginning of KitchenPC.  It’s fast, it’s stable, it works.  When Visual Studio 2010 came along, I used it briefly but just couldn’t convince myself to make the switch.

Visual Studio 2010 suffered through a similar development cycle as Project Server 2007, the application I worked on at Microsoft for a solid chunk of my career there.  Previously, Project Server was written as an ASP website (Yes, ASP, no not ASP.NET) and had a very mature code base mostly built in JScript (Yes, JScript, no not VBScript.)  We decided to rewrite the entire server in managed code, while at the same time, cramming as many new bells and whistles into the product as we possible could.  We decided to do all of this during the Office 2007 time frame, a two-year release cycle where most products weren’t changing anything huge, and certainly not being rewritten from scratch.

The result?  A giant disaster.  The product was unstable, buggy, most innovative features ended up getting cut anyway, and the new features that did go in were poorly thought out and implemented.  On the plus side, we had a brand new, more modern code base.  Albeit, that code base took a lot of shortcuts, ensuring that down the road, backwards compatibility would come at the cost of being stuck with a poorly laid out set of APIs.  The amount of technical debt accrued during that release would make China shudder.

Visual Studio 2010 went through a similar release.  The product was rewritten as a WPF app using managed code.  They brought in two architects, both of whom came up with wildly unrealistic estimates for what could be done.  They spent years on this redesign, getting nowhere.  The result was a release that was unstable, buggy, slow, and really didn’t do anything new besides its support for the .NET 4.0 framework.  When I tried VS2010, I ran into nothing but problems.  Sometimes it would act like the shift button was stuck down, and highlight text when I moved the arrow keys.  Often times I’d be editing an ASPX file, and the entire IDE would just spontaneously vanish.  It was noticeably slower, and some larger files would just grind the entire thing to a halt, forcing me to do edits in Notepad2 instead.  I never quite did figure out how to debug both .NET 4 server code and JavaScript code at the same time; I would have to detach the debugger from the web server and reattach it to Internet Explorer, wasting all sorts of time.  In the end, this product was a huge step backwards from the 2008 release, which simply worked.

However, years past and we’ve now moved on to the .NET 4.5 framework.  A lot of the open source projects I use now require at least .NET 4.0 to even compile.  I find myself really wanting to take advantage of some of the new language features, and plus when I start doing Windows Phone or Surface development, I’m going to have to upgrade anyway.  So I figured I would give Visual Studio 2012 a shot.

Wow, am I impressed with this release.

This IDE is beautiful, it works, it’s slick and it’s fast.  You can tell they really took the time to pay off some of their own technical debt.  It no longer seems clunky, it no longer crashes, and the debugger works flawlessly.  It has all sorts of great new features, like the ability to pin a pane to any monitor, better code searching, and improved JavaScript support.  I’ve also been taking advantage of new build features, which I’ll go into more detail in the next post.

Even more impressive was the fact that I could open my VS2008 Solution file and it was upgraded on the fly to target the .NET 4.5 framework, and everything compiled successfully on the very first try.  What I thought was going to be an evening of work turned out to be a few minutes.

I also took the time to install Windows 8 on my dev box, which I’m equally happy with.  It’s also a fast and stable environment that looks nice and is easy to use.  The weird new metro-style start menu is a bit weird, but it actually works fairly well when you’re using two monitors.  You’ll only get the start menu on one screen, and you can click on the second monitor for it to go away.  Your shortcuts in the launch bar are duplicated on both monitors, so you can use those to quickly launch applications if that’s what you’re used to.  I’m also getting fairly comfortable with the Win+Q key to find and launch programs, which works almost as well as Spotlight on OS/X.  I also really enjoy the panoramic themes, which are collections of beautiful images that span multiple monitors.

I think upgrading to Windows 8, .NET 4.5 and Visual Studio 2012 sets me up for a much better development environment for the KitchenPC web site, as well as mobile and tablet apps in the near future.  Needless to say, if there’s anyone reading from either the Windows 8 team or the Visual Studio 2012 team; fantastic work, and keep it up!

During the last month, I’ve been working on paying off some of the technical debt that has been collecting interest over the course of KitchenPC’s development. Most of these have been stability changes, or just things that, when fixed, remove roadblocks to a smoother development process. I’d like to go over these in a three part blog series that, like the Hitchhikers Guide to the Galaxy trilogy, will consist of five parts.

Part 3/3: Static files? Not on my server!

After implementing my new session management system, one of the main problems was that I was stuck with really big cookies – somewhere over 700 bites, err bytes.  That’s a lot of data to be sent on each request, including requests to static script files, images, CSS files, fonts, and other web resources that have no need for the session data stored in each cookie.  Now, after I posted the last blog I ended up writing my own custom serialization code for the session data, which got the cookie size down from 700+ bytes to 77 bytes (well, depending on the size of your user name,) so that’s a huge win.  However, I still wanted to implement a system that would not transmit cookies over the wire on each request.  For this reason (and others,) I decided to move all my static files over to a CDN.

A CDN, according to Wikipedia, is a “large distributed system of servers deployed in multiple data centers in the Internet.”  More specifically, it’s a network of servers that can easily store static files for you so that you don’t have to house them on your own web servers, which are busy with dynamic content, database queries, finding out what you can do with 47 ounces of asparagus, etc.  This network is usually built using servers across dozens of locations.  There are two huge advantages of this geographical diversity.  First, if one node goes down due to a wind storm, bird strike, or someone tripping over a power cord (they told me they were going to tape down those cords!), then your content can be served up from elsewhere.  Second, requests can automatically be routed to data centers near-by, which will result in faster load times.  In other words, someone in Hong Kong visiting KitchenPC will download graphics and script files from servers near Hong Kong, and someone in Seattle visiting KitchenPC will download those same graphics and script files from servers near Seattle.  You get the idea.

Finding the Right CDN For You

There are tons of different CDN companies out there.  However, not all of them directly deal with end users.  For example, EdgeCast is a huge provider, but their minimum package is a thousand gigs of data for around $300 a month.  Way more than a small website needs.  For this reason, there are many smaller companies that simply buy up bandwidth at wholesale prices from the big guys, and resell it in smaller chunks to people like me.  The advantage of going through one of these companies is that you have no minimum to buy; your monthly bill can literally be like 88 cents.

Rackspace CloudFiles

The first CDN I checked out was Rackspace, whose solutions is called CloudFiles.  They’re built on Akamai CDN, and were desirable because I already host my web servers through Rackspace, and having less services billing me each month is always a good thing.  I have been using CloudFiles already for storing recipe images on.  During the beta version, if you uploaded either a profile picture or a recipe image, that file would go straight to CloudFiles and be served from there.  However, when I checked into CloudFiles for hosting my site’s static content on, I was hugely disappointed.

First, they don’t support origin-pulls.  An origin-pull, in CDN vernacular, is the ability to have the CDN download the file from your server the first time it’s requested, then cache it from that point on.  In other words, if someone requests http://cdn.kitchenpc.com/images/logo.png, and that particular node in the CDN doesn’t yet have that file, it will download the file from its origin, which is http://www.kitchenpc.com/images/logo.png.  This greatly simplifies things, as you don’t need to push out all your content ahead of time, and push it out again whenever things change.  Using Rackspace, I’d have to setup a new publishing process that copies all my files out to CloudFiles using their proprietary API (they can’t even be bothered to support something standard, such as FTP) – which means I have to either copy everything (very slow), or keep track of exactly what files were changed since I last published.  No thanks.

With a CDN supporting origin-pulls, I can simply deploy my changes out to my web server (which I already have scripts to do) and then call a single API which invalidates the CDN cache, causing the CDN to pull the modified files from my server once again.  For me, this is a huge win.

CloudFiles also doesn’t support folder hierarchies.  I find this completely ridiculous, especially considering how I have a “RecipeImages” folder with 60,000 files in it.  Their web interface basically chokes, and graphical front-ends to CloudFiles, such as CyberDuck, also are too slow to be usable.  I have various folders on my web server, such as /scripts, /styles, /images, etc to organize my content.  I’m absolutely not about to redo all my HTML to put every file in the same directory, especially since I use various plugins, such as TinyMCE, that require static resources to be laid out in specific locations.

CloudFiles actually allows you to hack around this limitation, as it supports the forward-slash character in an object name, but then you’d be writing some sort of publishing mechanism that flattens out your folder hierarchy, comes up with all the right object names, and deploys files using their proprietary REST API.  I had time for none of this.  Hopefully some day RackSpace will catch up with the rest of the world and provide a real CDN solution, but for now, they were out of the running.

GoGrid

Next, I decided to give GoGrid a try.  They came recommended to me, and were quite high up on a lot of the performance comparisons I looked at.  I mentioned earlier that EdgeCast has various resellers.  GoGrid is one of these.

GoGrid not only sells CDN services, but they provide complete cloud hosting (as well as dedicated hosting) as well.  Unfortunately, you have to sign up for their cloud hosting account before you can provision a CDN account, which must be done by emailing customer support and waiting an hour.  Signing up for this account proved difficult.  For starters, my credit card was denied due to a vague error.  After calling the bank, I was told the error was on GoGrid’s side.  Luckily, their customer support was incredibly helpful and stayed in chat with me for quite some time.  I was eventually told I should try a debit card, and I could switch over to a credit card once the account was setup.  However, at this time, their servers started misbehaving.  I would start typing in my billing information, and after about 10 seconds, the page would refresh and tell me the session had expired.  I tried on two different computers and three different web browsers, all with the same issue.  The customer support rep had no idea what the problem was.  Eventually, I connected to a remote server on RackSpace’s network and for some reason that computer worked.  It took me about two hours just to sign up for GoGrid.  The customer service rep was great, and even gave me a $100 credit on my account.

When I had the account setup, it didn’t take me too long to figure out how to setup the CDN.  Their interface is not the greatest, and changes (such as defining a CNAME) take a while to propagate, but it’s definitely usable.  Very quickly, I found a huge limitation in their design.

Basically, a CNAME (such as cdn.kitchenpc.com) can only point to a single root origin, such as http://www.kitchenpc.com/images.  I didn’t want to have to define cdn-images.kitchenpc.com, cdn-scripts.kitchenpc.com, etc.  Now, I can point cdn.kitchenpc.com to http://www.kitchenpc.com directly, however then any resource on my server can be pulled through the CDN; including dynamic content such as the home page.  Now, probably this doesn’t really matter that much.  In fact, it doesn’t at all.  However I’m just OCD about how my servers are setup, and decided I didn’t like it.  I did try emailing customer support, and they were completely ignorant as to what I was trying to do.  I decided it would take more time to explain it to them than it was worth, so I decided I’d had enough of GoGrid.

Amazon CloudFront

The last CDN I tried was Amazon CloudFront.  Amazon is, of course, a huge player in the startup world, hosting countless sites.  They have a huge CDN spanning the globe, and very competitive prices.  One nice thing about Amazon is I already do a lot of business with them and already have an account, so they already had all my billing information and everything.  Setting up a CloudFront account took about 30 seconds.

Their web interface is also superior and very easy to use.  Defining a CNAME was a snap, every change I made was instant, and everything just worked on the first try.  Amazon also has the same limitation; a CNAME can only point to a single root resource on the origin.  However, Amazon provides a feature called Behaviors.  A Behavior can define exactly what URLs are allowed and not allowed.  Using this feature, I was able to define behaviors to allow only requests to /scripts/*, /images/* and /styles/*.  Problem solved.

Amazon does have a bit of a downside.  Their pricing is quite convoluted compared to GoGrid, who just charges a flat rate per gigabyte.  Amazon has various prices depending on where you want data cached, how many times you call their APIs, how many times you invalidate the cache (though your first 1,000 are free), etc.  I came to the conclusion that though their pricing was not as straight forward, I just wasn’t dealing with enough data to care.  I expect my usage to be under $5/mon.

So…

So in the end, I ended up with Amazon CloudFront and am quite happy with them.  Modifying my site HTML was also quite easy.  Since I use XML templates for all my pages, I was able to add some code into the pre-processor to rewrite HTML such as:

<img cdn.src=”/images/logo.png” />

to:

<img src=”http://cdn.kitchenpc.com/images/logo.png&#8221; />

And then be able to define the CDN URL prefix within the web.config file.  This lets me run my site locally on my dev box without hitting the CDN, and use the CDN in the production environment.  I then had to change a bunch of HTML, however this was pretty easy with Visual Studio’s “Find and Replace” tools.  Within about an hour, I was completely up and running on Amazon CloudFront, with the site running quite nicely.

For startups, I’d definitely recommend using a CDN.  It’s very cheap (the bandwidth is probably cheaper than whatever you’re paying the server hosting company), provides fail-over and redundancy, takes stress off your web servers, and speeds up a lot of requests in other countries.  Also, since the domain name is different, you won’t be sending cookies over every HTTP request, which can speed up things as well.  Win-win.

During the last month, I’ve been working on paying off some of the technical debt that has been collecting interest over the course of KitchenPC’s development.  Most of these have been stability changes, or just things that, when fixed, remove roadblocks to a smoother development process.  I’d like to go over these in a three part blog series that, like the Hitchhikers Guide to the Galaxy trilogy, will consist of five parts.

Part 2/3: Mmmm cookies

The authorization and session management code in KitchenPC is among the oldest and most cobweb infested in the entire code base.  The design is fairly straight-forward, and designed to be completely stateless so that any HTTP request could be handled by any server at any time.  Here’s how it works; I keep track of each user using three UUIDs in the database.  The first UUID is the user’s public ID.  This ID can be shared with anyone, and was actually used in several URLs on the old version of the site, which allowed users to subscribe to other users and see their public profile.  This is also the primary key for the Users table in the database.  The second UUID is called the Security ID.  This was also stored in the database, but never surfaced in any URL or HTML.  It wouldn’t be possible to see the Security ID of any other user besides yourself.  The third UUID is called the Session ID.  This UUID changes every time you log on to the site using the Logon form or the Facebook connect mechanism.

After the user is authenticated, all three of these UUIDs are joined into a single byte array and then Base64 encoded into a cookie.  This auth token is passed into any web service call as a way of representing the currently logged in user, and those three UUIDs are then de-serialized and validated against the database.  In order to hack the database, you’d need to know not only the user’s ID and security ID, but also their current valid session ID which changes on every logon.  It may not be industry grade security, but it’s fairly secure and works well.

The one problem with this approach is sessions must be maintained in the database.  To make matters worse, my design only supported a single session per user, as there was just one Session UUID column in the users table.  When users would logon with another browser, then that browser would have their currently valid session and the first browser would then show a “Session expired” error message.  This was sometimes not trapped, and weird “Unknown Error” messages would popup.  Most people just use a single computer at a time, so this wasn’t a huge deal.  However, the design just wasn’t going to cut it for mobile and tablet apps, when I want multiple users on multiple devices to use the same KitchenPC account.  A redesign was in order.

One approach would be to extend the current design.  I could create a sessions table, where a single user could have zero or more sessions.  Each time a user logged on, they would create a new session and have a valid cookie pointing to that session UUID.  I believe systems such as GMail work this way, as they allow you to list your currently active sessions.  The main drawback, in my opinion, was that it becomes messy to clean up after stale sessions.  Ultimately, you’d need some sort of cleanup process that ran every so often and deleted abandoned sessions.  You’d also have to keep timestamps on each session to keep it active, which would mean database updates on every web service call.  This could lead to scalability problems later on.

Instead, I took an approach modeled after the built in ASP.NET FormsAuthentication class, which runs as an HttpModule to validate each request.  Unlike my current implementation, the server does not keep track of valid sessions at all.  Everything needed to validate the authenticity of the session is stored within the cookie itself.  For example, a cookie might contain the string “Mike” as well as a UUID representing my user ID.  Upon each request, the server would say, “Yup that looks like a KitchenPC user account to me” and the request would be serviced under the credentials of that user account.

One major problem with this design.  What if the cookie is forged?  In other words, what if you changed the cookie to “Bob” and found out Bob’s user Id.

To prevent this, cookies are encrypted with a private key only known on the server.  It would now be difficult, if not impossible, to purposely change the cookie to represent another valid user.  Luckily, the .NET Framework has all the tools necessary to encrypt your cookies.  My new implementation uses a Triple DEA block cipher, which is a pretty good algorithm for this sort of encryption.  First, you’d want to serialize your session data to a byte array, which can be done manually or using the BinaryFormatter class.  We’ll call that byte array rawBytes.  Next, you’d encrypt the data to a new byte array:

TripleDES des = TripleDES.Create();
des.Key = key;
des.IV = iv;

MemoryStream encryptionStream = new MemoryStream();
CryptoStream encrypt = new CryptoStream(encryptionStream, des.CreateEncryptor(), CryptoStreamMode.Write);

encrypt.Write(rawBytes, 0, rawBytes.Length);
encrypt.FlushFinalBlock();
encrypt.Close();
byte[] encBytes = encryptionStream.ToArray();

In the code above, we create a new instance of the TripleDES class. The Key and IV properties are set to a byte array which represent your private key. These values need to be the same when you decrypt the cookie, so it would be wise to store them in a configuration file somewhere.

We then create a CryptoStream, and write the rawBytes array containing your unencrypted session information. We can then call encryptionStream.ToArray() to get the encrypted bytes out. You’d then serialize this out (perhaps as a Base64 string) to a cookie.

There’s one small problem with this. Though it would be nearly impossible to forge a valid cookie, one could still tamper with the cookie bytes and cause who knows what havoc. For example, if my encrypted bytes were [1, 2, 3, 4, 5] and I changed that to [1, 2, 3, 4, 6], this would still decrypt, just not to what I had originally encryted. This is because encryption algorithms don’t self-validate. It’s not like in the movies where if you crack the key, you get a big “Access Granted!” flashing message on the screen. This is actually good, as you don’t actually know when or if you’ve successfully decrypted the message; you just know that some bytes went in, some bytes came out.

However, we want to make our sessions tamper resistant. If someone changes even a single byte in the cookie, I want to just toss that cookie out and ignore it. To do this, you’d use a validation hash to store a hash of the unencrypted bytes. SHA-256 is a great cryptographic hash function for that purpose.

HMACSHA256 hmac = new HMACSHA256(valKey);
byte[] hash = hmac.ComputeHash(rawBytes);

valKey is an array of bytes, usually 64 bytes long, that would also be kept securely on your server. So long as you used the same valKey each time, the bytes you pass in to ComputeHash would hash the same each time.

So, now we’ve encrypted rawBytes to byte array called encBytes, as well as stored a hash of the original data stored in a byte array called hash. We’d now want to combine them into a single byte array as such:

byte[] ret = encBytes.Concat<byte>(hash).ToArray();

You now have a single byte array that you can serialize to a Base64 string and store in a cookie. Users would pretty much have no way to change the data without generating a new hash, which they could not do since they don’t have your hash key (valKey).

To decrypt the cookie, you’d do the same thing in reverse:

private static byte[] DecryptCookie(byte[] encBytes)
{
   TripleDES des = TripleDES.Create();
   des.Key = key;
   des.IV = iv;

   HMACSHA256 hmac = new HMACSHA256(valKey);
   int valSize = hmac.HashSize / 8;
   int msgLength = encBytes.Length - valSize;
   byte[] message = new byte[msgLength];
   byte[] valBytes = new byte[valSize];
   Buffer.BlockCopy(encBytes, 0, message, 0, msgLength);
   Buffer.BlockCopy(encBytes, msgLength, valBytes, 0, valSize);

   MemoryStream decryptionStreamBacking = new MemoryStream();
   CryptoStream decrypt = new CryptoStream(decryptionStreamBacking, des.CreateDecryptor(), CryptoStreamMode.Write);
   decrypt.Write(message, 0, msgLength);
   decrypt.FlushFinalBlock();
   decrypt.Close();

   byte[] decMessage = decryptionStreamBacking.ToArray();

   //Verify key matches
   byte[] hash = hmac.ComputeHash(decMessage);
   if (valBytes.SequenceEqual(hash))
   {
      return decMessage;
   }

   throw new SecurityException("Auth Cookie appears to have been tampered with!");
}

First, we split apart the byte array into its two components; the decrypted bytes and the 64 byte hash.

Once again we setup a TripleDES instance, only this time we decrypt the data to the stream. You’ll notice I use hmac.HashSize / 8 instead of hard coding in 64, since technically you can use any length key you want and I wanted my code to be flexible. I then have an array called message, which contains the TripleDES encrypted session data, and valBytes, which contain the validation bytes from the hash. I then decrypt message to a byte array called decMessage, and then compute the hash on that unencryted message. If it matches valBytes, then we know the key is legit.

Why Re-invent the Wheel?

Internally, this is very similar to what FormsAuthentication does.  So why did I create my own implementation?  First off, because I wanted to.  I actually enjoy implementing this sort of thing.  But mainly because I didn’t find the built-in support very flexible.  The ASP.NET mechanism only allows you to store a username as a string, and no other information on the user.  I wanted to be able to store the user’s UUID, as well as their name and perhaps a few other pieces of information.  I wanted to serialize this as my own datatype, allowing me to extract user data without having to hit the database for more information.  It also made the transition between my old code and the new code a lot easier, without the need to re-factor a lot of code.  The old cookie could be deserialized to a data type that was used in various methods, constructors, etc in the code base.  I wanted the new code to work in a similar way.

After doing quite a bit of testing with the new auth code, I must say I’m quite pleased.  Sessions last forever, and users don’t get random “Session Expired” popups when they logged on with another computer.  The code is also a lot faster.  I don’t need to check the authenticity of a cookie in the database each page load or web method call.  I can decrypt the data and validate the hash to make sure the information within the cookie is valid.  I can now be logged on to KitchenPC on all my computers and not worry about a thing!

The one drawback of this approach is these cookies are fairly long.  Mine is about 700 bytes or so.  This means another 700 bytes is passed in to each HTTP request, which can hurt performance.  This can be optimized by minimizing the data you’re storing in the encrypted package, and also using shorter (albeit less secure) keys and hashes.  I’m also thinking I could do my own serialization rather than using the BinaryFormatter class, which embeds things such as type data.

In the end, I implemented all this code as an IHttpModule which will run on each request, setting the value of HttpContext.Current.User if the cookie is valid, which is a fairly good approach.  You would then just add this class in the <httpModules> section of your web.config.  I was planning on sharing the entire code, but I’m afraid this post is just getting too long.  I’d be happy to share it with anyone who asks though!  Just let me know.  That’s it for now!

During the last month, I’ve been working on paying off some of the technical debt that has been collecting interest over the course of KitchenPC’s development.  Most of these have been stability changes, or just things that, when fixed, remove roadblocks to a smoother development process.  I’d like to go over these in a three part blog series that, like the Hitchhikers Guide to the Galaxy trilogy, will consist of five parts.

Part 1/3: Optimizing the Application Loading Process

KitchenPC is implemented as a web application that runs within an IIS worker process.  Everything from “What Can I Make” to recipe searches to NLP queries is run within this context, and nothing much is handled out of proc.  There is one exception, email queuing, which runs as a Windows service.  However, pretty much everything else happens under IIS.  For this reason, there is a rather lengthy load time when the app initially boots up, as it has to load every ingredient and recipe from the database, compile the data, build in-memory graphs, build search trees, and initialize other data on the heap which makes the user experience lightning fast later on.

During the beta, this was pretty fast since I only had about 10,000 recipes and no NLP dictionaries.  App startup time was about 2-3 seconds.  However, I now possess a collection of recipes nearly six times larger, plus a ton of grammatical data to make natural language queries possible.  The application start time, even on a fast computer, is now somewhere around 10-15 seconds.

This presented two problems.  First, I’m impatient.  Working long hours on KitchenPC requires many, many rebuilds.  Each time I fire up the application in Visual Studio, I had to twiddle my thumbs while all the data was loaded into memory.  Often times, I was changing things that had nothing to do with this data, and didn’t even need to use these features.  Second, there were many bugs where if requests came in while the app was loading, there’d be random dictionary collisions and other problems that would cause exceptions to be thrown, and sometimes the app initialization to fail.  This was mostly due to poor code that didn’t lock objects and make them thread safe.  As site traffic picked up, this created a lot of friction deploying new changes into production.  My goal was to quickly be able to deploy changes, and not have a single HTTP request error out.

Multi-threaded Application Loading

My solution to this problem was to make the Application_Start code as simple as possible, and simply spawn a new thread to handle the heavy lifting.  So now, the application start looks something like this:

public class Global : System.Web.HttpApplication
{
   void Application_Start(object sender, EventArgs e)
   {
      Thread thread = new Thread(LoadData);
      thread.Start();
   }

   private void LoadData()
   {
      // I can haz data
   }
}

The first time a user goes to the site, the LoadData method is called on a new thread.  The user will immediately see the home page, even though KitchenPC is actually not fully initialized.  Of course, this means that certain functionality on the site will not be available for about 10-15 seconds, which could be a problem if the user immediately uses something like “Ingredients to Exclude” (which relies on NLP), selects a recipe within the search results (which relies on recipe aggregation code), or clicks on “What Can I Make?” (which relies on the modeling engine) – All of these features depend on data that’s loaded into static memory on initialization.

To solve this, I put write locks on this data as it’s being loaded.  The LoadData() method, cute as the lolcatz reference is, actually looks more like this:

private static ReaderWriterLockSlim _cacheLock = new ReaderWriterLockSlim();

public static void LoadData()
{
   _cacheLock.EnterWriteLock();
   try
   {
      // Load data from the database
   }
   finally
   {
      _cacheLock.ExitWriteLock();
   }
}

Then, any code that needs to reference any of this data enters a read lock:

public static string ReadData(Guid key)
{
   _cacheLock.EnterReadLock();
   try
   {
      // Lookup key in data and return value
   }
   finally
   {
      _cacheLock.ExitReadLock();
   }
}

From the user’s point of a view, if they were to use one of these features while the app was still loading, they would get a ten second pause or so until the initialization code finished and the data were fully available.  Remember, this would only be a problem for the first few seconds after the IIS app pool was reset (such as new binaries were sent out to the server, or a configuration change was made), which usually happens at night when traffic is low.

Another advantage of this approach is I can also reload data without reloading the entire app.  There’s also administrative web services that can call LoadData() again, re-acquiring that write lock, to refresh the data in memory.  This is done when we change NLP data, push new recipes into the site, or change certain ingredient metadata.  Basically, certain site features can temporarily be halted or taken offline as data is being refreshed.

This makes making minor site config changes or site updates much smoother, and everything is now done in a much more thread-safe manner without weird random exceptions cropping up all over the place.

Not all components support this!

One gotcha with this design is not all ASP.NET components support being run outside the local thread scope.  For example, anything that relies on HttpContext.Current having a value will throw a NullReferenceException when being run in a newly spawned thread, as HttpContext.Current is actually a dictionary keyed by a thread ID.  If you’re no longer running in the thread that started the HTTP request, this value will all of a sudden be null.

Castle ActiveRecord, which is the ORM that KitchenPC is built on top of, uses the HttpContext as a key to figure out which database connection and transaction to use.

Luckily, ActiveRecord ships with a class called HybridWebThreadScopeInfo which will solve this problem.  This IWebThreadScopeInfo implementation will detect if HttpContext.Current is null, in which case it will initialize a new database context just as if it were a new request.

If you take a look at the code, you’ll see:

HttpContext current = HttpContext.Current;

if (current == null)
{
   if (stack == null)
   {
      stack = new Stack();
   }

   return stack;
}

Where-as the normal WebThreadScopeInfo class will throw an exception if current is null.

You can easily configure this in web.config with one line:

<activerecord isWeb="true" threadinfotype="Castle.ActiveRecord.Framework.Scopes.HybridWebThreadScopeInfo, Castle.ActiveRecord.Web">

That’s all there is to it!

Hope you’ve enjoyed this little technical insight into the inner workings of KitchenPC, and hopefully some of these techniques will help you come up with a better design for your app.  Stay tuned for part 2, which will be equally technical and nerdy!

This evening, I’ve been toying around with some SQL queries to model exactly how the “common recipe” search should behave.  This allows me to play with limits and values before I commit anything to code.

In reality, these efforts have exposed some of the culinary cruft that exists within the lower ranks of the major recipe websites.

First, I decided to rank each ingredient in the database with a commonality ranking.  I’ve decided that this ranking would be the total uses in the database divided by the total uses of the most used ingredient.  For example, salt is the most used ingredient in the database, with 28,016 recipes using it.  Salt would have a commonality of 1, since 28,016 / 28,016 = 1.  Granulated sugar is the second most common ingredient, with 25,389 uses.  It’s ranking would be 25389 / 28016.0, or  0.90623.  I created a view to generate these rankings as such:

CREATE VIEW IngredientCommonality AS
 WITH Ing AS (
 SELECT
 ShoppingIngredients.DisplayName,
 ShoppingIngredients.IngredientId,
 (SELECT Count(1) AS Count FROM RecipeIngredients WHERE RecipeIngredients.IngredientId = ShoppingIngredients.IngredientId) AS Uses
 FROM ShoppingIngredients
 )
 SELECT Ing.DisplayName, Ing.IngredientId, Ing.Uses, (Ing.Uses / (MAX(Ing.Uses::float) OVER ())) as Commonality FROM Ing;

Next, I decided to see the top 100 recipes in the database, sorted by how common their average ingredient was:

SELECT
 RecipeId,
 Title,
 (select AVG(Commonality) from RecipeIngredients inner join IngredientCommonality USING (IngredientId) where RecipeId=r.RecipeId) as AvgCommonality
FROM Recipes R ORDER BY AvgCommonality DESC LIMIT 100;

According to KitchenPC, the most common recipe on the entire Internet was crawled from AllRecipes.com, and is simply called “…”.  It appears to be some sort of test recipe, and its only ingredient is salt.  It has a perfect average commonality rating of 1.  You can check out this brilliant piece of culinary genius for yourself here.  By the way, it has a prep time of only 10 minutes, so it’s also an excellent choice for the busy single parent!

Also found was this gem on Food.com.  It’s called “Spa Cream” and consists of milk… and apparently more milk.

Ideally, I’d like to design this feature in such a way where the more common recipes appear at the top of the results, so users will see recipes they can most likely make at the top.  However, the fact that this exposes a lot of these junk recipes is a downside, to say the least.  One idea would be to filter out recipes that only call for a single ingredient, or devise other criteria to help avoid these less than useful matches.  On the bright side, it’s somewhat comforting that other large recipe sites (with huge budgets) also have less than perfect recipe databases.  Now it’s the job of KitchenPC to clean up the Internet!