MVC bundling & minification in an Umbraco website (Migrating from MVC Part 2)

by Damiaan Peeters 2. April 2013 13:38

My previous blog post where I explained how easy it is to upgrade your MVC application to an umbraco website, I didn’t mentioned the compilation errors of the @Styles and @Scripts elements in your layout.  These are the bundling & minification features of MVC.

Prerequisite

  1. We have our CSS files from our migration still in the “content” folder.  This means that we will not be able to update the file from the Umbraco backend.  But for now: “we don’t care”.  This migration had to be done.  Knipogende emoticon
  2. still have the App_Start folder with your previously used by MVC.  This folder contains your bundling script.

Install optimization using nuget

I allowed the installation of the umbraco nuget packages to overwrite my web.config.  Therefor the optimization package was not working anymore.  The easiest to solve this issue, was just to remove and add the package again.  I’m not going into how this is done.  All you guys now this better than I do.  If not, I’ll read it in the comments, and I’ll be glad to help you out.  That being said: launch this from the Package Manager console:

Remove-Package Microsoft.AspNet.Web.Optimization
Install-Package Microsoft.AspNet.Web.Optimization

Register the bundle config on application startup

You can just keep your MVC bundling & minification features by simply registering this on the application startup. We are reusing the MvcStartup class from our previous post. 

Adding this to the “started” event: 

BundleConfig.RegisterBundles(BundleTable.Bundles);  

You should be able to find the BundleConfig class in your App_Start folder.

Update Web.config

Add the “~/Content/” path to the umbraco umbracoReservedPaths in the web.config.

<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/Shop/,~/Content/"/>

Add @Styles to your View

@Styles.Render("~/Content/css")

You will need to add @using System.Web.Optimization to your view where you use the @Styles or @Script tags. 

I haven’t tried it adding the namespace to the web.config yet, but I guess that will work.

Who.I.am

Certified Umbraco Master, Part of Umbraco Certified partner comm-it, .Net and Azure developer, seo lover. Magician in my spare time.

Month List