The latest release of Visual Studio 2017 (15.8) comes with Microsoft Library Manager, or LibMan for short, there's also a CLI available and if you want to read about it from the horses mouth there's a post on the ASP.NET Blog all about it. There's a lot of different library/package managers out there, of course there's NuGet, NPM, Bower and Yarn to name some of the better known ones - and I'm sure I'll have missed a few from the "better known" list even then.

What's LibMan, why's it different and how does it work?

LibMan seems to be focused on client-side library and CSS management rather than being an "all the things" delivery method like NuGet, it doesn't require any additional tooling (so no npm along with its Node.js dependencies) and it lets you be explicit about where you want files to end up in your project, rather than having to add build tasks to hustle files around from where the package manager puts them to where you want them.

It works either by looking at the CDNJS distribution network, or a local (or network!) file-system store you've specified, so if you want to make sure your development teams environment will function in the absence of either internet access or the availability of CDNJS then there are options there for you.

Actually using it is really simple, to demonstrate it I've created a new ASP.NET Core Web Application project (2.1, of course!) choosing the just give me an empty project and I'll go from there option to keep it really really simple. Next up was making sure that static content (HTML, JavaScript, CSS and all that jazz) would be served by adding app.UseStaticFiles() to my Startup class. Once that was done I added a simple index.html to wwwroot, remembered that I'd want to add app.UseDefaultFiles() and added that to my Startup class before the app.UseStaticFiles() call so that requests get processed in the right order! Just to summarise, Startup looks like this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseDefaultFiles();
    app.UseStaticFiles(); 
}

Next up is actually using LibMan to drop in a client JavaScript library, and for this I'm going to choose..... Bootstrap!

Using LibMan

Before starting off with LibMan, I've added a new bootstrap folder to my wwwroot so that I've got somewhere for the scripts and other bits from Bootstrap to go, then it's just a matter of right-clicking on the folder and choosing Add > Client-Side Library... to open the LibMan window:

Once the LibMan window's open, which you can see right at the top of this post so I won't repeat it here, there's four key things to do/decide:

• Provider - this is where you choose between cdnjs, filesystem or unpkg
• Library - as the watermark says, type to search to find the library you want
• Include all library files / Choose specific files - Do you want every file for the library, or just some of them? You get to choose!
• Target Location - where you want them to go; you decide, not the package manager

In order to install Bootstrap (3.x.x) I'm going to use the "unpkg" provider and search for the specific version "[email protected]". Now I can pick and choose just the files that I want as I'm not interested in quite a few files in the package:

What would be nice is if I could map each of the files/folders I've chosen into my project in differing locations, as it stands I've got all the JavaScript, CSS and fonts for Bootstrap sat under wwwroot/bootstrap, rather than nicely organised into separate script, css, font, etc,.. folders. There's definite opportunity for an enhancement to LibMan here as trying to do this long-hand by adding multiple references to packages and filtering the files into different target folders causes an error related to having muiltiple instances of the same library. Once you've finished selecting files and click 'Install', the bottom bar of Visual Studio will show this for a while:

When it's done all the selected files should've appeared in Solution Explorer ready to be used, ready to use LibMan again to add jQuery - somewhat important as Bootstrap won't do anything without it! Now there's something of substance to add to index.html, so here it is in all its glory:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello, world!</title>
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.js"></script>
    <link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Show modal window</a>
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">A title for my dialog</h4>
                </div>
                <div class="modal-body">
                    Some text in the body of my modal dialog
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

All this does is uses Bootstrap to show a button that when pressed shows a dialog box which is just enough to prove that the library files are where they should be and all working properly:

It's all working!

Just to prove that it does, really work, delete the jQuery and Bootstrap folders and then re-build the project. Et voila, all the libraries get restored, except........ they don't. In order to get the library files to restore there are two choices, either restore them manually whenever you need them, or enable restoring them on build - all of which are available as options when right-clicking on the libman.json file that LibMan adds to your project. Having restore options, both manual and automatic

That's all thre is to it, a short walk-through of LibMan, what it does, how it does it and how it works day-to-day inside a project.