Bundling with Sitecore MVC

Sitecore

Sitecore’s MVC support is (as of Sitecore 6.6 update 5) based on the MVC3 implementation by Microsoft.

One really nice feature of Microsoft’s MVC4 implementation is the concept of bundling. Bundling allows a developer to aggregate a collection of either CSS files or Javascript files into a single “item” that can be easily manipulated and used within a Razor view.

It includes some excellent enhancements:

1. Reduces the number of Http requests made by the browser by aggregating the CSS or JS files into a single “virtual” file
2. Automatic minimization of CSS and JS files
3. Virtual Pathing (allows you to change the path used to access the aggregated group of files)
4. Simplified syntax to include possibly several files from within a Razor view
5. for more information on bundling, please see MVC4 Bundling and Minification

You can use these features within Sitecore’s MVC implementation as well. The following instructions assume you have a Sitecore 6.6 update 2 (or later) installation that you are working with, and that MVC has already been enabled.

Step 1 – Installing the needed assemblies

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

In order to use Bundling, you must install the necessary assemblies provided by Microsoft.  There are actually 2 components that are required – Microsoft.System.Optimization and WebGrease.  Both of these can be installed via nuget – the package name is Microsoft ASP.NET Web Optimization Framework

Make sure you select the correct item from nuget

Once you have installed them, the references to System.Web.Optimization and WebGrease will be included as references in your solution.

Step 2 – Creating Bundles in the Sitecore Pipeline

Normally, bundling makes use of the Global.asax / Application_Start method provided by ASP.NET.  In Sitecore, it’s best to avoid using this – especially if you are working on a Multi-site instance of Sitecore that could be shared with several other projects.

Instead of using Global.asax, you can inject a simple pipeline method into the <Initialize> pipeline.

using System.Web.Optimization;
using Sitecore;
using Sitecore.Pipelines;

namespace MyProject.Web.Pipelines
{
public class RegisterPlatformBundles
{
[UsedImplicitly]
public virtual void Process(PipelineArgs args)
{
RegisterBundles( BundleTable.Bundles );
}

private void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/assets/Platform/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/assets/Platform/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
&quot;~/assets/Platform/Scripts/jquery.unobtrusive<em>&quot;,
&quot;~/assets/Platform/Scripts/jquery.validate</em>&quot;));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle(&quot;~/bundles/modernizr&quot;).Include(
&quot;~/assets/Platform/Scripts/modernizr-*&quot;));
}

}
}

With the above class added to your project, you can inject this processor into the initialize pipeline by adding the following Sitecore configuration patch file into your App_Config/Include folder. Make sure to change the class and assembly name below from MyProject.Pipelines.RegisterMyBundles, MyProject to the actual name of your class and assembly.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
<pipelines>
<initialize>
<processor patch:before="processor[@type='Sitecore.Mvc.Pipelines.Loader.InitializeGlobalFilters, Sitecore.Mvc']"
type="MyProject.Web.Pipelines.RegisterPlatformBundles, MyProject" />
</initialize>
</pipelines>
</sitecore>
</configuration>

Step 3 – Using the Bundle in a Razor View

The above code creates a bundle at the virtual path ~/assets/Platform/bundles/jquery – in order to add that bundle to a Razor view there are 2 steps.  First, add the namspace System.Web.Optimization to the Web.config file located in your Views folder (or whatever you call the folder that contains your Razor views).

<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="System.Web.Optimization" />
</namespaces>
</pages>
</system.web.webPages.razor>

This will allow you to use the HtmlHelpers located within the assembly within your .cshtml files.

Within your .cshtml layout file, you can now add blocks such as

@using Sitecore.Mvc
@{
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
@Scripts.Render("~//bundles/modernizr")
</head>
<body>
<div>
@Html.Sitecore().Placeholder("content body")
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~//bundles/jqueryui")
</body>
</html>

Next, you need to add this to your web.config – there’s a lot of chatter around this because it shouldn’t be needed, but

<system.webServer>
<modules runAllManagedModulesForAllRequests="false">
<remove name="BundleModule"/> <add type="System.Web.Optimization.BundleModule" name="BundleModule"/>
...

Finally, I patched the IgnoreUrlPrefixes setting in sitecore to add the /bundles path

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
<settings>
<setting name="IgnoreUrlPrefixes" value="(all other sitecore paths here)|/bundles"/>
</settings>
</sitecore>
</configuration>