Share Bundles in ASP.NET Applications

Posted on 2016-06-09 Updated on 2016-12-25

I’m working on a system that needs to work and look as one web application. They share the same css styles and several JavaScript files. In an MVC application, Microsoft provides the ability to bundle styles and javascript, but everything I’ve seen and read so far puts the stylesheets and javascripts files in the applications /Content or /Scripts folder. In the past I used the aspnet_client folder to share common stylesheets and javascript files and it was not a problem because I was doing Web Forms and not using the bundling capabilities in .NET.

The current project is three .NET MVC 5 applications and they use the same stylesheets and share some custom javascript files, not to mention Angular, Bootstrap, and so on. For Angular and Bootstrap I can use the CDN but I’d like to really just bundle everything into a couple of bundles. I did figure out a way to share everything and store the files it the aspnet_client folder, but came across a few problems when I started to do the builds in Release mode.

The default location for the IIS website is C:\inetpub\wwwwroot and aspnet_client directory is there as a place where usually third party libraries will install their software. The aspnet_client directory is a global location for all web applications in the website. I think this is a good place to put common css and javascript files, even the ones from angular, bootstrap and so on if you don’t want to use the CDN for those third party packages.

To make shared bundling work, each application needs to create a virtual directory to point to the aspnet_client physical location. For three applications, let’s call them app1, app2, and app3. We need to create a virtual directory called aspnet_client in each of the applications.

This is one configuration that works:

C:\inetpub\wwwroot
  +-- aspnet_client
  |   +-- 
  |   +-- angular
  |   |   +-- 1.5.5
  |   +-- angular.uigrid
  |       +-- 3.1.0.1
  |   +-- bootstrap
  |   |   +-- 3.3.1
  |   |   +-- 3.3.6
  |   +-- custom
  |   |   +-- 1.0.0
  |   +-- custom
  |   |   +-- 1.0.0
  |   +-- jquery
  |   |   +-- 2.1.1
  |   +-- jquery.validation
  |       +-- 1.14.0
  +-- Dahl (this is the primary path for a family of applications in the website)
      +-- api
      +-- apps

On the D: drive I put each of the applications in their own folder. The aspnet_client below is a virtual directory in the application. The physical directory doesn’t exist on the D: drive, but instead points to c:\inetpub\wwwroot\aspnet_client.

D:\
 +-- Dahl
     +-- api
     |   +-- api1 (web api application #1)
     |   +-- api2 (web api application #2)
     |   +-- api3 (web api application #2)
     +-- apps
         +-- app1 (mvc application #1)
         |   +-- aspnet_client
         |       (physical path is c:\inetpub\wwwroot\aspnet_client)
         +-- app2  (mvc application #2)
         |   +-- aspnet_client
         |       (physical path is c:\inetpub\wwwroot\aspnet_client)
         +-- app3  (mvc application #3)
             +-- aspnet_client
                 (physical path is c:\inetpub\wwwroot\aspnet_client)

The default Bundling in .NET doesn’t allow you to use an absolute path. The path needs to be relative to the application it’s being used in, so /aspnet_client/… doesn’t work, you get an error. Using ~/aspnet_client works, even if aspnet_client is a virtual directory in the application. This is just one example, but there is a lot of different ways to configure this and make it work. In the RegisterBundles, I coded it as follows. Notice the bundle path mirrors the virtual path from aspnet_client/… to the last part in the bundle name.

I’ve read on stackoverflow where some say it’s a hack because the virtual path needs to mimic the actual path in the application and they shouldn’t have to do it this way. Technically they’re correct, but we have to live with it until Microsoft decides to fix it. For angular, bootstrap, and jquery files, using the CDN option is probably more appropriate but this shows how to do it without using a CDN.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add( new ScriptBundle( "~/aspnet_client/jquery/js" ).Include( 
                                   "~/aspnet_client/jquery/2.1.1/jquery.js",
                                   "~/aspnet_client/jquery.validation/1.14.0/jquery.validate.js" ) );

    bundles.Add( new ScriptBundle( "~/aspnet_client/angular/js" ).Include(
                                   "~/aspnet_client/angular/1.5.5/angular.js",
                                   "~/aspnet_client/angular/1.5.5/angular-animate.js",
                                   "~/aspnet_client/angular/1.5.5/angular-route.js",
                                   "~/aspnet_client/angular/1.5.5/angular-touch.js",
                                   "~/aspnet_client/angular/1.5.5/angular-mocks.js" ) );

   bundles.Add( new ScriptBundle( "~/aspnet_client/angular.ui-grid/js" ).Include( 
                                  "~/aspnet_client/angular.ui-grid/3.1.0.1/Scripts/ui-grid.js",
                                  "~/aspnet_client/angular.ui-grid/3.1.0.1/grunt-scripts/csv.js",
                                  "~/aspnet_client/angular.ui-grid/3.1.0.1/grunt-scripts/pdfmake.js",
                                  "~/aspnet_client/angular.ui-grid/3.1.0.1/grunt-scripts/vfs_fonts.js" ) );

    // 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( "~/aspnet_client/js/js" ).Include( 
                                   "~/aspnet_client/js/respond/1.2.0/respond.js",
                                   "~/aspnet_client/js/modernizr/2.6.2/modernizr-2.6.2.js" ) );

    //-------------------------------------------------------------------------------------
    //- Styles section
    bundles.Add( new StyleBundle( "~/aspnet_client/bootStrap/css" ).Include( 
                                  "~/aspnet_client/bootStrap/3.3.6/respond.js",
                                  "~/aspnet_client/bootStrap/3.3.6/bootstrap.css",
                                  "~/aspnet_client/bootStrap/3.3.6/bootstrap-theme.css" ) );

    bundles.Add( new StyleBundle( "~/aspnet_client/Custom/css" ).Include( 
                                  "~/aspnet_client/Custom/1.0.0/Custom.css",
                                  "~/aspnet_client/Custom/1.0.0/CustomLeftNav.css",
                                  "~/aspnet_client/Custom/1.0.0/dashboard.css" ) );

    bundles.Add( new StyleBundle( "~/aspnet_client/angular.ui-grid/3.1.0.1/Content/css" ).Include( 
                                  "~/aspnet_client/angular.ui-grid/3.1.0.1/Content/ui-grid.css" ) );

In the cshtml master layout file I used the following, content removed to keep it shorter.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render( "~/aspnet_client/bootStrap/css" )
    @Styles.Render( "~/aspnet_client/Custom/css" )
    @RenderSection( "styles", required: false )
</head>
<body>
    <div>
        @RenderBody()
    </div>

@Scripts.Render( "~/aspnet_client/jquery/js" )
@Scripts.Render( "~/aspnet_client/angular/js" )
@Scripts.Render( "~/aspnet_client/js/js" )
@RenderSection( "scripts", required: false )
</body>

In one of the view pages where the angular grid is used, include the following.

@section styles {
@Styles.Render("~/aspnet_client/angular.ui-grid/3.1.0.1/Content/css")

<div>
   page content...
</div>

@sections scripts {
@Scripts.Render("~/aspnet_client/angular.ui-grid/js")
}