Using CDNJS with LibMan for ASP.NET Core

The inspiration trigger for writing this blog post was a question from the ASP.NET Core forum community. The question was about the best way of using npm packages in ASP.NET Core. I will not write here about npm but instead, I will describe how to use an alternative new tool for installing Client-Side libraries of an ASP.NET Core Application. This tool is called Microsoft Library Manager (aka LibMan).

Prerequisites

I used the following tools:

  • Visual Studio 2017 Preview 15.9.0
  • .NET Core SDK 2.2.100-preview1-009349

What is CDNJS?

CDNJS is a free and Open Source Public Web CDN for Web developers where you can find 3403 libraries with 90027 different versions at this moment of writing this blog post.

What is LibMan?

LibMan is a tool that helps to find common Client-Side library files and add them to your web project. If you need to pull JavaScript or CSS files into your project from libraries like jQuery or bootstrap, you can use LibMan to search various global providers to find and download the files you need.

Why LibMan?

  • For apps not currently using another package manager
  • For projects where you think Bower and npm are overkill
  • For developers that don't want to use Bower/Yarn or npm
  • For developers that value simplicity in their tools
  • For using custom or private packages/files
  • For orchestrating file placement within your project

Why not LibMan?

  • Developer/team likes using tools such Bower, Yarn or npm
  • For apps that use WebPack or Browserify for module loading/bundling

LibMan Features

  • Add any library from cdnjs.com
  • Add any file from the file system, network share or remote URL
  • Only add the file(s) you need
  • Can install any file into any folder in your project/solution
  • Optional manifest file (libman.json)
  • Very fast
  • Full Visual Studio 2017 integration (>=v15.8)

How to use CDNJS via LibMan?

The idea here is to grab a Client-Side library, for instance, the font-awesome library from CDNJS and to install it in an ASP.NET Core Web application using LibMan.

First, you need to create ASP.NET Core 2.2 Web Application.

Visual Studio has a Show All Files button that shows the files or folders not seen in the solution tree by default. You can notice here the absence of libman.json file.

Right-clicking on the solution gives you the ability to manage Client-Side libraries through the following context menu.

When you click on "Manage Client-Side Libraries...", LibMan tooling on Visual Studio will generate a libman.json file.

When first created, the libman.json does not contain any library in the libraries node.

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

By using ASP.NET Core 2.2 Preview 1, the target framework is netcoreapp2.2 in the csproj file.

The Client-Side libraries need to be restored. A good practice is to automate the restore action at the build time.

This automation magic is done through the MSBuild process which is augmented by installing a new NuGet package "Microsoft.Web.LibraryManager.Build" in the MSBuild csproj file.

After configuring the automated restore, you can start adding your preferred Client-Side library.

The files format of the chosen library could be CSS, JS, fonts, etc. Those files are copied by default in the wwwroot/lib/your-chosen-library which is the perfect location for your ASP.NET Core Web Application's Client-Side libraries. You could imagine that CDNJS service is down for maintenance reasons or for some different reasons. Your Website will not be affected since you have your library download already inside your server.

There are 3 changes in the libman.json file once you hit the install button from the "Add Client-Side Library" popup window. The provider node is specified again to cdnjs unless it is different from the defaultProvider. The name and version of the library are added. The target location is added to the destination node.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [{
  "provider": "cdnjs",
  "library": "font-awesome@4.7.0",
  "destination": "wwwroot/lib/font-awesome/"
}
]
}

Edit the libman.json file to install libraries. Every time the file is saved, Visual Studio will install/restore the packages. Let's expand the target location of the font-awesome library!

Someone could ask where is the minified file for font-awesome library. The answer is simple if you click on the arrow icon button to expand the node font-awesome.css. But you have to make sure that the file nesting in Solution Explorer is enabled.

You can see the output of LibMan which is perfectly integrated into Visual Studio. LibMan is available for both Visual Studio and Command Line Interface.

When you build your solution, in the Output window where Build is selected, you can see MSBuild automating the restore of the LibMan libraries.

Let's hit Ctrl+F5 to run your Web Application before configuring and using the Client-Side library. The template starting from 2.2 Preview 1 is changed and becomes very simpler. IMHO, when you start from a minimalistic template you master all the configuration from the beginning and you can shape in your innovative way.

LibMan is a Client-Side libraries manager but only the developer is responsible for configuring and using them in an efficient way. Let's open the _Layout.cshtml file before configuration. Bootstrap 4.1.3 is already configured for ASP.NET Core 2.2 Preview 1.

Likewise, Bootstrap 4.1.3, let's do the same for the font-awesome library. For the development environment TagHelper, you can simply drag and drop the CSS file instead of writing of the link line.

Font-awesome library is configured and ready to be used for all environments. You can add some cars with different shapes and make the big one in red color.

To see the result, hit Ctrl+F5!

How to update/uninstall your Client-Side libraries?

Updating and uninstalling Client-Side libraries are easy through the yellow light bulb when opening the libman.json file. Edit the libman.json file to update/uninstall libraries. Every time the file is saved, Visual Studio will restore/delete the packages.

Summary

LibMan is an awesome tool for managing Client-Side libraries (install, update, uninstall etc) from CDNJS which is used in the new ASP.NET Core 2.2 Web Application template. It is possible to use another CDN provider but the idea is to make your Website faster for your users who are located in different countries in the world.

Source Code Demo

For more details, you can check the source code in my Cdnjs-Libman-Demo repository.

References

Library Manager: Client-side content manager for web apps

LibMan CLI Released

Library Manager (LibMan) in Visual Studio 2017 (15.7)

Library Manager, a Client-Side library in Visual Studio

Use the LibMan command-line interface (CLI) with ASP.NET Core

Library Manager Released in 15.8

Install and consume your third-party Client-Side libraries with ease and Happy Coding ...

aspnetcore CDN