MJSmithDev Development Notes from Matt Smith of PA, USA

ASP.NET 5 How to Easily Add New Bower Dependencies

bower-logo1 With ASP.NET 5 we have a new way to manage client side libraries, including JavaScript and CSS libraries. Prior to ASP.NET 5, out of the box, for client side libraries you could use Nuget or just manually download the files. Problem with Nuget for client side is someone has to maintain that list and there aren’t anywhere near as many in Nuget as there are in already maintained client side packaging systems. You can always manually download them, but obviously that leads to maintenace issues of keeping them updated.

Enter Bower. It handles pulling down and keeping up to date with the latest version of many client side packages. So, let’s look at the basics of how Bower dependencies works in ASP.NET 5 and how we can add a new client side package.

If you create a new web project, you’ll have a ‘bower.json’ file that looks something like…

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "jquery": "*",
    "jquery-validation": "1.11.1",
    "jquery-validation-unobtrusive": "3.2.2"
  }
}

Let’s say in your web project you want to use a materialize style library in your project. You see on the project site it says…

bower install materialize

…or alternatively you could go to the bower site and search for the bower package name there. So, you have the package name ‘materialize’. Let’s add that to the ‘bower.json’ file…

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "jquery": "*",
    "jquery-validation": "1.11.1",
    "jquery-validation-unobtrusive": "3.2.2",
    "materialize": "*"
  }
}

…The * on the end just specifies to get any/latest version. Bower uses semantic versioning, so you can specify specic versions or ranges of versions that it should use. Just as a side note, to remove a package from being pulled down to the Bower cache, you can simply delete the line under dependencies.

So, that’s it right! Nope. Well, sort of. That’s enough to pull down the materialize library files into the local Bower cache, but not enough for you to actually be able to use it in your site yet. Next we need to have a process to move the necessary library files from the Bower cache over to your libs directory. That will be handled by another new piece to the ASP.NET world - Gulp. So this post short and sweet, I’ll put the Gulp piece in Part 2 of ASP.NET 5 How to Easily Add New Bower Dependencies. I’ll also show a great Node.js addition that will make life even easier for adding new client side packages.

Welcome

WelcomeWelcome from the Interwebs. This is the developer’s blog of one Matt Smith from Pennsylvania, USA (as opposed to the ‘literally’ thousands of other Matt Smiths out there - seriously, try finding a domain name for matt smith). This site will not provide for world peace, or whirled peas if you prefer. It is planned to be merely a collection of my developer moments of interesting or even not so interesting titbits of development. There will be no set time frame, just whenever that titbit crosses my brain, browser, or IDE.

I really enjoy web development and my paycheck comes from .net development. I still do php development as well, but with the direction Microsoft is heading with their latest web stack I’m quite excited to focus the bulk of my time in that arena. There is a ridiculous amount to learn around web development and trying to even figure out what to learn is challenging.

I don’t like writing long novels of posts, so I’ll end it here. See you in the 1s and 0s.