Bundling for .Net Core MVC

So my next project after standing up this WordPress installation is to begin moving my wedding website from Azure to my home server (mostly to archive it since the wedding celebrations are long over now).

The challenge here is that the home server runs Linux, not Windows. There are various reasons for this, but it mostly has to do with security and ease of maintenance. Windows is a bit of a pain to remotely control, and SSH/Debian just makes server management just a lot easier. But what this also means is that I have to take the original site (written in .Net Framework) and transfer it to .Net Core.

While there are many similarities between the two, some things have definitely changed. One of them being bundling. But don’t stress! The changes actually aren’t that hard to put in and you might find them a bit easier to deal with.

Anyway, the bundling configuration I’m transferring over is below:

using System.Web.Optimization;

namespace WeddingWebsite
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/javascript").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/UnderConstruction.js",
                        "~/Scripts/NavigationBar.js",
                        "~/Scripts/Countdown.js",
                        "~/Scripts/OurLoveStory.js",
                        "~/Scripts/LazyLoad.js"
                        ));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/bootstrap-grid.css",
                      "~/Content/site.css",
                      "~/Content/UnderConstruction.css",
                      "~/Content/NavigationBar.css",
                      "~/Content/Hero.css",
                      "~/Content/WereGettingMarriedSection.css",
                      "~/Content/Countdown.css",
                      "~/Content/OurLoveStory.css",
                      "~/Content/areyouattending.css",
                      "~/Content/wedding-event.css",
                      "~/Content/GoogleMapsSection.css",
                      "~/Content/PhotosSection.css",
                      "~/Content/rsvp-form.css",
                      "~/Content/footer-section.css"));
        }
    }

Pretty standard for .Net Framework. But how does this work on .Net Core? Well, like below:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/bootstrap.css",
      "wwwroot/css/bootstrap-grid.css",
      "wwwroot/css/site.css",
      "wwwroot/css/UnderConstruction.css",
      "wwwroot/css/NavigationBar.css",
      "wwwroot/css/Hero.css",
      "wwwroot/css/WereGettingMarriedSection.css",
      "wwwroot/css/Countdown.css",
      "wwwroot/css/OurLoveStory.css",
      "wwwroot/css/areyouattending.css",
      "wwwroot/css/wedding-event.css",
      "wwwroot/css/GoogleMapsSection.css",
      "wwwroot/css/PhotosSection.css",
      "wwwroot/css/rsvp-form.css",
      "wwwroot/css/footer-section.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/jquery-{version}.js",
      "wwwroot/js/bootstrap.js",
      "wwwroot/js/UnderConstruction.js",
      "wwwroot/js/NavigationBar.js",
      "wwwroot/js/Countdown.js",
      "wwwroot/js/OurLoveStory.js",
      "wwwroot/js/LazyLoad.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

“What kind of malarky is this?” You’re asking, cause you’re a clever dev and you noticed this is JSON. Well, for .Net Core MVC, all the bundle configuration now goes into a bundleconfig.json file in the root of the project.

Granted, there are more changes then that: The paths changed as well, given that .Net Core has the static files sitting in a wwwroot folder instead of Content or scripts.

There are different way to configure the bundling and minification too, which the Microsoft docs go more into detail over.

You also need to install the BuildBundlerMinifier nuget package, which takes care of adding the steps to the build process that do the actual bundling and minifying. You can install it by just running the following command in the Package Manager Console in Visual Studio:

Install-Package BuildBundlerMinifier

And there you go, you got .Net Core bundles now.

For now, take this article with a grain of salt. I haven’t had a successful compilation yet cause there’s still a bit of work to do. So I may come back and edit this post if it needs correcting.

Also, have another cute picture.

This article was written by thomas

Leave a Reply

Your email address will not be published. Required fields are marked *