Skip to content

Instantly share code, notes, and snippets.

@jkarsrud
Last active May 27, 2020 08:51
Show Gist options
  • Save jkarsrud/5143239 to your computer and use it in GitHub Desktop.
Save jkarsrud/5143239 to your computer and use it in GitHub Desktop.
How to use ASP.NET Bundling and Minifications in Umbraco

How to use ASP.NET Bundling and Minifications in Umbraco

Using the ASP.NET bundling and minifications is pretty straight forward, but here is a small guide that take care of a few gotchas when implementing bundles in your Umbraco project.

Installing ASP.NET Bundling and Minifications

ASP.NET Bundling and Minifications is part of the Microsoft ASP.NET Web Optimization Framework and is installed via NuGet;

PM> Install-Package Microsoft.AspNet.Web.Optimization

Once this is done, you need to create a BundleConfig.cs in your App_Start1 folder. This is where you register your different bundles. It can be extremely simple, or it can be more complex, but the gist of it is this;

namespace Project.Namespace.App_Start {
	public class BundleConfig
	{
	    public static void RegisterBundles(BundleCollection bundles)
	    {
	        bundles.Add(new StyleBundle("~/bundles/css").Include(
	            "~/css/screen.css"));
	
	        bundles.Add(new ScriptBundle("~/bundles/js").Include(
	            "~/scripts/jquery-{version}.js"));
	
	        LogHelper.Info<string>("Bundles Loaded");
	
			//Comment this out to control this setting via web.config compilation debug attribute
	        BundleTable.EnableOptimizations = true; 
	    }
	}
}

You will then have to register your bundles in the Global.asax.cs. If you don't have a Global.asax.cs, just create one, and make it inherit from UmbracoApplication. Note that you will have to point your Global.asax markup file to point to your new Global class, not UmbracoApplication2. Below is an example Global.asax.

namespace Project.Namespace
{
    public class Global : UmbracoApplication
    {
        protected override void OnApplicationStarted(object sender, EventArgs e)
        {
            base.OnApplicationStarted(sender, e);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

Last, but not least, you'll need to add your bundles folder path to the umbracoReservedPaths in the Web.config:

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

Now you're pretty much set. Just remember that if you add another bundle path - say ~/static/libs, you'll have to add ~/static to your reserved paths as well.

How to use

You might be wondering how to use these bundles you've set up as well? It's easy. System.Web.Optimization comes with two helpers that allow you to render out these bundles; Styles and Scripts. Both of these have a Render-method where you pass in the a string array with the names of your bundles.

@using System.Web.Optimization
@inherits UmbracoTemplatePage
<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
        @Styles.Render("~/bundles/css")
    </head>
    <body>
        @RenderBody()
        @Scripts.Render("~/bundles/js")
    </body>
</html>

You can have multiple instances of these, and include page specific bundles in custom sections in your layout views if you wish.

[1] The App_Start folder isn't magical like App_Data or App_Code, but is just a convention for classes that run on Application_Start/OnApplicationStarted in your Global.asax.

[2] <%@ Application Codebehind="Global.asax.cs" Inherits="Project.Namespace.Global" Language="C#" %>

More information

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

@thdotnet
Copy link

I did exactly the same thing, but I always get a 404 status code. I'm using umbraco 7.0.4 and System.Web.Optimization 1.1.0. Any ideas of what could be?

@cvocvo
Copy link

cvocvo commented Jun 4, 2014

I'm also getting a 404 that my bundle couldn't be loaded; any ideas?

@cvocvo
Copy link

cvocvo commented Jun 5, 2014

@thdotnet -- I fixed the error, detailed here: http://stackoverflow.com/a/24063466/559988

@jmiazga
Copy link

jmiazga commented Jun 6, 2014

Registering the bundle in the Global.asax.cs also resulted in a 404. As mentioned in the comment above I followed this: http://stackoverflow.com/a/24063466/559988

I removed the Global.asax.cs file, and created the following class in the App Start:

public class ApplicationEventHandler : IApplicationEventHandler
    {
        public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) { }

        public void OnApplicationInitialized(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) { }

        public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }

@enkelmedia
Copy link

Thanks for sharing! =D Great reference!

@abhilashca
Copy link

Great tip. Thank you for sharing :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment