jkarsrud/BundleInstall.md

Last active September 27, 2025 02:38

Star (26) You must be signed in to star a gist
Fork (1) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/jkarsrud/5143239.js"></script>
Save jkarsrud/5143239 to your computer and use it in GitHub Desktop.

Download ZIP

How to use ASP.NET Bundling and Minifications in Umbraco

Raw

BundleInstall.md

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_Start¹ 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 UmbracoApplication². 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

azzlack commented Mar 12, 2013

If you're doing an Umbraco plugin (which means you can't/shouldn't use global.asax), you can also use WebActivator to make your code execute on application start.

Just use the PostApplicationStartMethod attribute like this:

[assembly: WebActivator.PostApplicationStartMethod(typeof(MyPluginInitializer), "PostApplicationStart")]
namespace MyPlugin
{
    /// <summary>
    /// Initializes My Plugin
    /// </summary>
    public static class MyPluginInitializer
    {
        /// <summary>
        /// Runs right after the application has initialized
        /// </summary>
        public static void PostApplicationStart()  
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

jkarsrud commented Mar 12, 2013

Author

That's a nice tip! :)

erlendr commented Mar 13, 2013

Nice :)

AndyButland commented Jan 17, 2014

Thanks for posting this - very clear and helpful.

prabuw commented Feb 6, 2014

Worked like treat. Thanks.

thdotnet commented Feb 19, 2014

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 commented Jun 4, 2014

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

cvocvo commented Jun 5, 2014

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

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);
        }
    }