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.
