You may have heard that with ASP.NET 5 and Visual Studio 2015, Microsoft will be using Bower as a client-side package manager. That means that packages like jQuery, Bootstrap and Angular will no longer be referenced using NuGet. This might scare you initially, but I very strongly believe that this is a good thing.
Migrating to Bootstrap 4
Why is this a good thing?
So…Given the fact that Microsoft is moving to Bower in the next version of ASP.NET, I have started migrating all my existing ASP.NET projects to use Bower for client side packages.
Here is a step-by-step guide to using Bower with Visual Studio 2013 using the MVC5 File->New Project template as an example.
Install Node and Bower
If you don’t already have it installed, download and install node.js.
Once node is installed, we need to install bower using the node package manager (npm). From the command line, run:
Yup..you’re going to need git. Bower uses git to download packages from github. Specifically, you will need to install msysgit and select the “Run Git from the Windows Command Prompt” option.
Initializing Bower for our project
First up, we will need to create a new bower.json file for our project. This is the file that will contain a list of all the packages your application depends on. The easiest way to do this is to run the bower init command in the your project folder:
The default settings are fine for our purposes. The only setting I changed was marking the project as private to avoid accidentally publishing my project to the public bower registry.
Replacing Nuget Packages with Bower Packages
A new MVC 5 project reference jQuery, jQuery Validation, Bootstrap and Modernizr. Let’s start by adding jQuery using Bower. Bower packages are installed from the command line using the bower install.
By default, bower components are installed in the bower_components folder. I don’t include this folder in Visual Studio and I don’t check it in to source control. The contents are easily restored by calling the bower install command with no other options.
Next, we will install the remaining packages. We also need to install RespondJS. This is a responsive design polyfill that is included in the Nuget bootstrap package but is not included in the bower package.
Now, we have all our required client side components installed in the bower_components folder. The bower.json file describes all the client side packages that our project depends on.
Getting files from bower_components
I prefer using Gulp these days so that’s what we will use here. To setup our project for Gulp, follow the instructions on my earlier blog post.
We will need the following node modules for this gulp file.
Here is the gulpfile.js that I created to roughly mimic the bundles that are created by the MVC new project template. The comments in the file explain what each gulp task is doing.
To run the gulp tasks, simply run gulp from the command line. This should output a number of min.js files to the Scripts folder and some css and font files to the Contents/dist folder. In Visual Studio, include these new files into the project.
Removing NuGet Packages
Now that we have all the script and css bundles we need, we can uninstall the original NuGet packages.
The Script folder is now significantly cleaned up, only containing the files that are generated as output from the gulp build.
Referencing Scripts and Styles
Next, we need to change the way we are referencing the script and css files. In Views\Shared\_Layout.cshtml change the following in the head tag:
At the bottom of the page, change the following
And finally, remove any reference to the jquery validation bundle since we included those scripts in the jQuery bundle.
To complete the cleanup process, we can delete the App_Start/BundleConfig.cs file and remove the call to RegisterBundles from Global.asax.cs.
Ensuring Gulp runs before running the app
Currently, our solution requires the developer to manually call gulp from the command line to restore bower packages and re-generate the output files.
Open the Task Runner Explorer window (View –> Other Windows –> Task Runner Explorer). Select the default gulp task, right click, select Bindings –> Before Build. Now the default gulp task will run every time the application is built in Visual Studio. This will ensure that the output files are always up to date for the developer.
We now have a fully working application that uses Bower to reference client side libraries and Gulp to define and generate bundles. By using Bower, we get access to a larger and more up-to-date library of client side packages than we did with NuGet. Using Gulp, we have a lot more flexibility in how we define bundles than we did with the ASP.NET Bundling / Minification system.
This approach is more consistent with the way the rest of the world is building web applications today and should make for an easier transition into the next version of ASP.NET.