Bower or Library Manager?

With Visual Studio 15.7 it was planned to have Library Manager available to manage client side libraries with Web applications. However, Library Manager was delayed to version 15.8 of Visual Studio 2017. Trying to add a JavaScript library from the NuGet server, you might get the error that Library Manager should be used instead. This article explains how you can still get Bower with Visual Studio 2017 15.7, and also introduces you to the Library Manager, and why this new package manager can be useful.

Library - Package Managers

Message: “Use Library Manager instead”

Using ASP.NET Core, trying to get a client side library from the NuGet server, you’ll not be successful using the NuGet Package Manager. You might see an error as showing in the following picture, e.g. adding jQuery, Use Library Manager instead. From the NuGet description, the link references the GitHub repository from Library Manager.

NuGet - Library Manager

You’ve different options on using the Library Manager now:

Use Bower

While Bower is still maintained, the Bower website already recommends Yarn and Webpack for front-end projects. So, some time in the future you’ll switch. Maybe not now, maybe you wait for the Library Manager to be more ready.

Bower recommends Yarn and Webpack

To use Bower with your ASP.NET Core Web application, create a bower.json file using

bower init

In case you don’t have bower installed, you can install it with

npm install -g bower

In case you don’t have npm installed, get it from NPM.

As soon you’ve a bower.json file in your project, you can select this file, and from the context menu choose Manage Bower Packages. Tool support similar to NuGet is available:

Bower Integration in Visual Studio

Use Library Manager

With some of my projects I’m already switching to the new Library Manager. This can be done easily using Visual Studio 2017 Preview (version 15.8), it’s already built-in there. But why another package manager at all? Aren’t there enough with NuGet for .NET packages and NPM for scripting libraries? At first, I was sceptical as well. However, if you don’t need the power of NPM, and just need to get some JavaScript files? The JavaScript files can also be delivered from Content Delivery Network (CDN) systems. Exactly here, the Library Manager has a great place.

Using Visual Studio 2017 version 15.8 you can open the Library Manager by selecting the project in Solution Explorer and opening the context menu Manage Client-Side Libraries…. This creates a libman.json file:


{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": []
}

view raw

libman.json

hosted with ❤ by GitHub

By default, CDNJS is used to get the JavaScript libraries. You can also get files from the local filesystem, a network share, or use/create other providers for different sources.

Now you can add the libraries you need to the file libman.json. IntelliSense is offered, and the server contacted to give you autocomplete with the list of libraries available. Using the destination setting, you specify where the files should be stored. As you proabably don’t need all the files from the package, you can exactly specify the files that should be copied. As you save the file, the libraries are copied to the destination. From the Solution Explorer you also have the option Restore Client-Side Libraries from the context menu selecting libman.json.


{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.3.1",
"destination": "wwwroot/lib/jQuery",
"files": ["jquery.js", "jquery.min.js", "jquery.min.map"]
}
]
}

view raw

libman.json

hosted with ❤ by GitHub

To automatically restore the libraries when the project is built, the NuGet package Microsoft.Web.LibraryManager.Build can be added. A menu in the context menu offers Enable Restore on Build which adds this NuGet package.

The Library Manager also supports checking for updates directly from a light bulb when working with libman.json:

Check for updates

Some features are still missing, but I expect more and more features coming with the Library Manager. The Roadmap shows a UI is coming to manage libraries. Working with the JSON file is fine for me 🙂

I’m also missing some libraries (e.g. @aspnet/signalr) on cdnjs. So other providers need to come as well. There’s a good progress as shown in the discussion on providers for Library Manager.

Summary

In my opinion (after I’ve changed my mind trying it) it’s good to have another package manager that is useful for light scenarios. Of course, if you need WebPack or specific NPM features, Library Manager is not for you. If you just need some JavaScript libraries without the extra stuff or tools for the management of the libraries, the Library Manager can be a useful option.

In case you don’t want to use preview versions of Library Manager and Visual Studio, you can keep working with Bower in the meantime.

Enjoy programming and learning,
Christian

2 thoughts on “Bower or Library Manager?

  1. mr. Christian, first thank you, your books are amazing! I’m right now almost in the middle of c# 7 core 2.0, a very useful book!.

    Sorry to bother, I did purchase a book called from another author called Mastering Entity Framework 2.0, I did download the example files but all of the examples have this bower.json file, I did install npm and then bower, the file is there with 4 packages (bootstrap, jquery, jquery-validation and unobstrusive) but nothing happens… no installation of any files… its like having a .txt file, no action…

    I do understand we don’t have to use bower anymore, instead, we should use libman.json, but as all the examples are using bower, how can I get this to work, or how can I tell VS to download the bower packages?

    PLEASE! PLEASE! provide me some advice on this one… I remember VS used to do this automatically, as we modified the son file, it installed a huge amount of files, I don’t know why is just there doing nothing… please help!

    Like

    1. Guillermo, thanks for the feedback on my book.

      I also checked into the code samples of the Mastering book on Entity Framework Core. You can get the JavaScript libraries to the project using “bower install”, which creates the wwwroot folder and adds the libraries according to the definition of the bower.json file.
      However, the samples miss the site JavaScript and CSS files, and you can have issues because of this. You still should be able to run the .NET code. Did you try to contact the author of the Mastering book?
      Probably you already find enough information on EF Core in the Professional C# 7 book 🙂

      Greetings,
      Christian

      Like

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.