Bower and ASP .NET 5: a Tutorial

ASP .NET 5 RC1 is out. This is a short tutorial on how you can include client packages in this new version and how Bower is integrated in Visual Studio 2015.
Here’s how to manage your client dependencies.

Before You Start

For those who have not idea of what is new I invite you to first understand the basics. Please, come back afterwards.

New in this Version

One of many new features in ASP .NET 5 is the addition of Bower. The good news is that you can easily understand it.

Bower is a package manager that allows us to install and restore client side packages (e.g., JavaScript libraries, client frameworks, and CSS files), resolve dependencies, and installing the needed packages. For server side libraries you’ll still use NuGet Package Manager.

With Bower updates are faster. Every time a new version or update is released we can easily find it in Bower. You no longer have to wait as we had to with NuGet.

Another huge advantage is that with Bower we can find a lot more libraries. With NuGet the number of libraries was limited because it was used by .NET developers mostly. With Bower every frontend developer can contribute their libraries.

So we could say that NuGet continues to be the king in the server side, but Bower is the new king of client-land.

How to Configure with Bower

Alright, now let’s go ahead and prove it. In this example I’ll use Visual Studio 2015 with ASP .NET 5 RC1.

1. Create an empty project (i.e., don’t use a template)
2. Add the bower.json file and the .bowerrc file will be added automatically
3. In your project, select > Add > New item… >
4. In the client-side section, select the Bower Configuration File


Adding Bower configuration file

5. In bower.json we just type the name of the package that we want to add. Notice autocomplete helps you by suggesting versions. Nice!


Displaying versions

6. Save the changes and a folder named lib will be immediately generated in wwwroot with the requested package. In this case JQuery is needed so Bower adds it as well. Wonderful!


bower.json in Project

7. In the section Dependencies you can see what you have through Bower including its version and dependencies in a direct way.


Dependencies view

Something Interesting

The lib folder is named by default but you can name it whatever you want later. You can do this in the .bowerrc file.

The rest is the same, just include the name of your package and save changes.

And Then …

You’re done!

It’s that simple. You can now easily add client-side packages and enjoy the variety automagically. Updates are immediate.

For more info contact me, Janneth Amaya at [email protected] or at Twitter as @AmayaGomezJ.