When developing cloud applications it is still useful to build them so they can run also on local machine without network connection. One thing you use from CDN when in cloud and from app folder when not connected are common JavaScript libraries. In this posting I will show you how to add support for local and CDN script stores to your ASP.NET MVC web
application. Our solution is simple. We will add new configuration setting to our web.config file (including cloud transform file of it) and new property to our web
application. In master page where scripts are included we will include scripts from CDN conditionally. There is nothing complex, all changes we make are simple ones. 1. Adding new property to web
application Although I am using ASP.NET MVC web
application these modifications work also very well with ASP.NET Forms. Open Global.asax and add new static property to your
application class. public static bool UseCdn { get { var valueString = ConfigurationManager.AppSettings["useCdn"]; bool useCdn; bool.TryParse(valueString, out useCdn); return useCdn; } } If you want less round-trips to configuration data you can keep some nullable boolean in your
application class scope and load CDN setting first time it is asked. 2. Adding new configuration setting to web.config By default my
application uses local scripts. Although my
application runs on cloud I can do a lot of stuff without staging environment in cloud. So by default I don’t have costs on traffic when including scripts from
application folders. <appSettings> <add key="UseCdn" value="false" /> </appSettings> You can also set UseCdn value to true and change it to false when you are not connected to network. 3. Modifying web.config cloud transform I have special configuration for my solution that I use when deploying my web
application to cloud. This configuration is called Cloud and transform for this configuration is located in web.cloud.config. To make
application using CDN when deployed to cloud we need the following transform. <appSettings> <add key="UseCdn" value="true" xdt:Transform="SetAttributes" xdt:Locator="Match(key)" /> </appSettings> Now when you publish your
application to cloud it uses CDN by default. 4. Including scripts in master pages The last thing we need to change is our master page. My solution is simple. I check if I have to include scripts from CDN and if it is true then I include scripts from there. Otherwise my scripts will be included from
application folder. @if (MyWeb.MvcApplication.UseCdn) { <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script> } else { <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> } Although here is only one script shown you can add all your scripts that are also available in some CDN in this if-else block. You are free to include scripts from different CDN services if you need. Conclusion As we saw it was very easy to modify our
application to make it use CDN for JavaScript libraries in cloud and local scripts when run on local machine. We made only small changes to our
application code, configuration and master pages to get different script sources supported. Our
application is now more independent from
external sources when we are working on it.
