Bower and Visual Studio, really?

An introduction on how to use Bower with ASP .NET 5 RC1

ASP NET 5 RC1 is out, this allows us to explore the new features and start to experiment. For those who have not idea of what is new I invite you to understand the basics here and for those who are experimenting already, I share this small post to get to know how is bower integrated in Visual Studio 2015.

One of many news in ASP NET 5, besides the structure change, is the addition of Bower.

…and how do you eat it? The good news is that you don’t eat it and you can easily understand it.

If you are using Visual Studio, like most of .Net developers, let me tell you that VS makes this pretty easy for us.

Bower is a package manager that allow us to install and restore client side packages (this includes javascript libraries, client frameworks and CSS files) resolving dependencies and installing the needed packages.

For server side libraries we are still using NuGet Package Manager. And if you wonder why NuGet is not used for client-side libraries anymore, let me tell you what is probably the best reason, Bower is focused in front-end packages for web development and every time a new version or update is released we can easily find it in Bower, but it could take some time for NuGet to get updated and the newest versions would be out of reach.

Besides, the time of updates availability in Bower is minimum, another huge advantage is that we can find a lot of libraries. And if you weren’t wondering why we are not using NuGet para client side libraries well it’s too late since you already read it.

So we could say that NuGet is the king in the server side, but the client-kingdom is for Bower no doubt about it.

Alright,now we should go ahead and prove it. In this example I’m using Visual Studio 2015 with ASP NET RC1

1. Create an empty project, let’s start from scratch instead of a template.

2. Add the bower.json file (and its .bowerrc file)

In our project right click >Add > New item… >

In the client-side section select the Bower Configuration File

Adding Bower Configuration File

3. In bower.json we just type the name of the package that we want to add, you can notice that we have autocomplete making it easier and suggesting versions. Nice!

Displaying versions

4. We only need to 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 add it as well, wonderful!

bower.json in Project

5. 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 the folder as you want, all you have to do is to rename the folder in the .bowerrc file.

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

Rename folder
New folder Display

Done! so simple, now you can easily add client-side packages and enjoy all the variety of them.