Tech Junkie Blog: ASP.NET MVC 5 From Scratch : Configure The BundleConfig Class To Use CDN

Saturday, June 18, 2016

ASP.NET MVC 5 From Scratch : Configure The BundleConfig Class To Use CDN

A lot of developers assumed that they can only configure the BundleConfig class to use only local resources in their MVC project.  That is not the case, in fact it is quite easy to use a cdn version of your JavaScript libraries instead of the one in your local folder.  In the previous blog we went over how to create the BundleConfig class from scratch.  In this blog we will go over how to configure MVC to use the cdn resource instead of your local resource files.

Step-By-Step Instructions:

1.  Open the MvcApp project
2.  Open the BundleConfig.cs file under the folder App_Start










3.  From the last blog we have the following code

using System.Web;
using System.Web.Optimization;

namespace MvcApp
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));
        }
    }
}

4.  Now let's change the code so that our MVC project uses the CDN location instead of the local virtual path library instead.  Change the code to the following.

using System.Web;
using System.Web.Optimization;

namespace MvcApp
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js").Include("~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap","https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"));

            bundles.Add(new StyleBundle("~/Content/css", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css").Include("~/Content/bootstrap.css"));

            BundleTable.EnableOptimizations = true;
            bundles.UseCdn = true;
        }
    }
}

What a lot of developers don't realized is that there is an overload for class constructor of ScriptBundle and StyleBundle, which takes two string parameters, for example for the ScriptBundle it would be ScriptBundle(string, string) and for the StyleBundle it would be StyleBundle(string, string).  The first parameter is the virtual path and the second parameter is the cdnPath.  We might be asking yourself, if it takes two parameters, how does MVC know which one to use?  Well, the cdn location is used only when the BundleTable.EnableOptimizations property is set to true.  Setting the EnableOptimization property to true tells MVC to use the use the minified version of the file instead of the regular version.  When this property is set to true, and the cdn path is present MVC will use the cdn path instead of the local virtual path.  There is one more property you have to set to true and that is the bundles.UseCdn.  This tells MVC to use the cdn location instead of the local version.  If the BundleTable.EnableOptimization is set to false, then the local version is used automatically as a fall back because the cdn version is the minified version.

5.  Now you run the MvcApp application by click Crt+F5 and look in the source code you will see that page uses the cdn path instead of the local virtual path.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

    </head>
    <body>
        <h1>This is from the _ViewStart.cshtml</h1>
        

<h3>This is from Index.cshtml</h3>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


12 comments:

  1. im confused about the usefulness of this? Why would you still set the local virtual path? I mean why not just always use the CDN version? Also, is there away for the cdn path to always use the latest stable version? or you need to set the version yourself[everytime]?

    ReplyDelete
    Replies
    1. There are times when you can't use the cdn version. For instance if you working inside a firewall or an inside a corporate network where there's a good chance that the cdn URLs will be filtered out.

      Delete
  2. I think there's a problem here.. you wanted to include two javascript files, bootstrap & respond.js in your bundle.. but with the cdn support the respond.js was lost.

    ReplyDelete
    Replies
    1. Very good point. Did the author ever respond?

      Delete
    2. respond.js was a mistake, I haven't had time to maintain this blog. I will make the corrections once I have the bandwidth. Daytime job is taking most of my time.

      Delete
  3. My goal for this blog is to help people. I sympathize with people who wants to learn a new technology. I was a newbie once. People in tech are not very nice about passing the torch

    ReplyDelete
  4. Jason, thanks for sharing your asp.net MVC knowledge and expertise it is very helpful, useful and informative.

    ReplyDelete
  5. Your blog is much appreciated. I've hit some hiccups but its still been very good. Thank you for taking the time to write it and share your knowledge.

    ReplyDelete
  6. Thanks for tutorial - it's the first series I've worked through that has helped me to understand how an MVC project actually fits together.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Jason, Very much appreciated to me. Good starting point when you have not been working with front end at all before.

    ReplyDelete