Library Manager to manage Client-side Packages

With Visual Studio 2017 15.8 the Library Manager (LibMan) is released. This feature of Visual Studio allows to manage client side libraries with Web applications. You might ask why is there another management utility for client side libraries. You’re already using NPM, Bower, WebPack, or any other technology to do that. Depending on the client application type you’re doing, staying with the technology you’re already using might still be the best choice. However, NPM or other technologies are overblown if you just need to use simple JavaScript or CSS files. If this is all you need, and you want to select files needed to be published with your app, and get version features with your app, the Library Manager is a great choice.

Using the Library Manager

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 an initial libman.json file:

Now you can add the libraries you need to the file libman.json. IntelliSense is offered with the editor. While you make changes to the file, the configured server is contacted to give you autocomplete with the list of libraries available.

With the destination setting, you specify where the files should be stored. This can be wwwroot/lib/jQuery to save the files needed for jQuery to this folder below wwwroot to have it available for the clients.

As you probably don’t need all the files from the package, you can exactly specify with the files setting the files that should be copied. IntelliSense lists available files from the package.

As you save the libman.json file, the libraries are copied to the destination. From the Solution Explorer you also have the option Enable Restore Client-Side Libraries on Build… from the context menu selecting libman.json. With this, you an enable to automatically restore the libraries when the project is built. Selecting this option, the NuGet package Microsoft.Web.LibraryManager.Build is automatically added to the project.

Enable Restore on Build

The complete libman.json file referencing the jQuery library and copying specific files to the wwwroot/lib/jQuery folder is shown here:

Providers

By default, the Library Manager references libraries from the cdnjs.com. This CDN server offers 3400 libraries with 89710 different versions (at the time of this writing). This is great for most commonly used libraries.

However, this is not good enough. For example, with SignalR I only found the old client side libraries based on jQuery on this server but not the new one built for the ASP.NET Core SignalR server. There’s an issue on GitHub CDNJS with a library request tag. I was just wondering why this issue didn’t go anywhere and was just closed. The answer can be found in the SignalR repository: GitHub SignalR – it’s just the resources available to do it. Because Library Manager now supports the CDN server from NPM, this shouldn’t really be an issue.

However, currently there’s a Library Manager bug with libraries that have the @ symbol in library names, and this is the case with *@aspnet/signalr’. I expect to have a fix very soon, see Broken behavior when dealing with libraries containing an @ symbol.

A filesystem provider is available with the Library Manager as well. This way, you can get JavaScript libraries using other means (e.g. using NPM), and use the Library Manager to specifies what files should go to your wwwroot folder.

Interesting process is going on with providers. A jsDelivr provider might be added. A pull request was already submitted to the Library Manager GitHub repository. jsDelivr supports both CDN from NPM as well as directly from GitHub. See this discussion about integrating jsDelivr.

Update Packages

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

LibMan CLI

Integration of LibMan with the .NET Core CLI is now also available. You just need to install the global tool:

> dotnet tool install -g Microsoft.Web.LibraryManager.CLI

After this, you can use the command line to install, uninstall, update, and restore libraries, and to clean the cache. See Using LibMan CLI for more information on using the command line.

Summary

The Micrsoft Library Manager is not just another package manager for client side libraries. It’s simple and fills a gap not offered by other providers. It’s not the only provider you should use with all your Web applications. If you need more features that are offered from NPM, e.g. when using SPA frameworks, keep using NPM. The Library Manager is great when you need some JavaScript or CSS files and publish it with your Web application.

I’ve updated code samples for my book Professional C# 7 and .NET Core in the ASP.NET Core chapter to use the Library Manager instead of using Bower which has been the default in earlier versions of ASP.NET Core Web application templates.

If you found this information valuable and want to support me with coffee to write more articles, see

Enjoy programming and learning,
Christian