This repository has been archived by the owner. It is now read-only.


ntotten edited this page Oct 10, 2011 · 2 revisions
Clone this wiki locally

To get started with the Windows Azure CDN Helpers install one of two Nuget packages. If you are using the Razor view engine install "CdnHelpers.Razor" and if you are using the ASPX view engine install "CdnHelpers.ASPX". These packages are exactly the same except for a few minor Web.Config differences.

After you install the packages you will need to setup your configuration. The configuration is all done using code that runs at your applications startup. You can find this code in /App_Start/CdnHelpers.cs.

The two big things to change are your Cdn Endpoing Url and to enable blob storage backing if you are not hosting your website on Windows Azure. Here is the default configuration. Notice the CdnEndpointUrl is set to "[namespace]". You must change this to your CDN endpoing URL.

public static void Start() {

	CdnHelpersContext.Current.Configure(c => {
		c.CdnEndointUrl = "[namespace]";
		c.HashKey = Assembly.GetExecutingAssembly().GetName().Version.ToString();
		c.DebuggingEnabled = () => { return System.Web.HttpContext.Current.Request.IsLocal; };



Configuration Options

  • CdnEndpointUrl - (Required) This field sets your cdn url host. You can find this in the Windows Azure portal.
  • DebuggingEnabled - This is a delegate that gets called when the CDN urls are being built. You can use this to specify when you want to use the local resources or the CDN resources. For example, you may only want to disable debugging when the application is running on your production environment. You could do this by inspecting the Request Url.
  • HashKey - This is the MD5 hash key used when generating the file names of CDN content. If you set this to something like the assembly version number it will cause all your content to be refreshed every time you build and deploy your app. Generally you want to leave this null.
  • StorageFolderName - This is the name of the storage folder for your cached content and the container name if you are using the blob. This is generally set to "CDN" and you don't have to change it.
  • EnabledBlobStorageBacking(CloudStorageAccount) - This configuration method should be called only if you are using the blob storage to host your cache files. If you call this method, all of your CDN content will be transferred to blob storage.
  • EnableImageOptimizations() - This configuration method enables Sprites and Image optimization. If you don't call this method, image optimization will not run.
  • UseCdnForContentFolder() - This configuration method will enable the CDN for all of the files in your /Content folder.
  • UseCdnForScriptsFolder() - This configuration method will enable the CDN for all of the files in your /Scripts folder.
  • UseCdnForFolder("folderPath") - This configuration method will enable the CDN for the specified folder.

The two methods called here "RegisterCombinedJsFiles" and "RegisterCombinedCssFiles" are used to build combined and minimized JS and CSS files. You set the key of the file and enumerate all the files you want combined into that key. Then to use the files you set your CSS and JS files in your Master Page or Layout Page like this:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <link href="@Url.CdnCombinedCss("site")" rel="stylesheet" type="text/css" />
    <script src="@Url.CdnContent("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.CdnCombinedJs("core")" type="text/javascript"></script>

After that you are ready to go. When you are running the site in debug (as defined in your configuration code) the HTML will be rendered with relative paths to your app in the /cdn folder.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <link href="/cdn/9c6d46fbd4ddafaf74cf605cfa902bba.css" rel="stylesheet" type="text/css" />
    <script src="/cdn/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/cdn/a87341b5b4c095639e86220e2db79980.js" type="text/javascript"></script>

When you are running your site in production the CDN content will be searched from the full CDN url.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <link href="http://[namespace]" rel="stylesheet" type="text/css" />
    <script src="" type="text/javascript"></script>
    <script src="http://[namespace]" type="text/javascript"></script>

You will also notice that the JQuery file is served from the Microsoft Ajax CDN. Any file that is available in that CDN will automatically be used as this CDN is preferred to your own since it is likely the user already has that file cached on their local computer. You can define additional CDN files in the /App_Data/CdnHelpers.xml file.

The second part of the Cdn Helpers library is integration with the Sprite and Image Optimization tool. This tool will allow you to easy create sprite image combines and speed up your site significantly. To use the sprites from the CDN simply create sprites by placing the images in the App_Sprites folder. You then need to add the sprites css link and your image as follows:

<link href="@Url.CdnSpriteCss("~/App_Sprites/")" rel="stylesheet" type="text/css" />

The resulting output will be:

<link href="http://[namespace]" rel="stylesheet" type="text/css" />
<img class="cat.jpg" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />