.Net Foundation On .NET, 8 Oct 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Client-side package management with Library Manager

Description

The Library Manager is a lightweight tool that makes it easy to acquire client-side libraries. Developers can retrieve libraries like jQuery, bootstrap, Vue.js and others from various supported CDNs or even the file system.
In this episode, Justin Clareburt (@justcla78) comes on to show us some demos of Library Manager, that is now generally available in Visual Studio 2017 v15.8.
[00:46] - What's the purpose of Library Manager?
[01:34] - Using Library Manager from Visual Studio
[05:57] - What providers does Library Manager support?
[07:56] - How does Library Manager support versioning?
[08:35] - Working with the manifest file
[11:42] - Build time enhancements for Visual Studio
[13:18] - Working with Library Manager via the command-line
[19:27] - How does Library Manager compare to other client-slide library managers?
[21:20] - Documentations and acquisition information

Related blog post:
https://blogs.msdn.microsoft.com/webdev/2018/04/17/library-manager-client-side-content-manager-for-web-apps/

Docs:
https://docs.microsoft.com/aspnet/core/client-side/libman/index?view=aspnetcore-2.1

A

Welcome to another episode of on.net, my name is jeremy likeness and I'm here with Justin Clair Burt who's going to tell us a little bit about a tool, that's very important for web developers, called library manager or Lib man for short to begin with, though Justin. Why don't you tell us a little bit about who you are and what you do great.

B

Thanks for having me on Jeremy, my name is Justin Claire, but I'm. The program manager in the web tools in Visual, Studio and I'm here today, because I'm very excited to announce and talk about library manager, which is a new feature. We've built to assist with web development in Visual, Studio library manager is purpose, is to allow web developers to easily acquire client-side library files that they need to use inside their web projects. Okay, great examples include jQuery bootstrap files that users often want to have inside their web projects.

B

Typically they've been ways of fetching those files by going to the internet and downloading them manually, copying them from a previous project or using some other tools. Previously, we had a tool that we supported called Bower and that allows you to bring in those files Bowers been deprecated, so we wanted to come up with a new solution that we own a controlled that would allow web developers to fetch these files, and so we invented library manager.

B

Okay, originally it was one of Matt's Christensen's brainchild and we took it on board and have now implemented into the product. Okay, great, would you like to.

A

See a demonstration I would love to see that so you're saying this is built into Visual Studio.

B

That's raw library manager is now available with Visual Studio 2017 from version 15.8 onwards. Okay,.

A

And so I'm a web developer I'm a dotnet web developer I want to start a new project. What do I do with library manager, great.

B

Let's have a look, so what I have open in front of me now is a basic web application. It just has one page. It says hello world, but I'd like to bring more into this web application, I'd like to bring some client-side library files in so first I'm, going to bring in bootstrap the Wade library manager works from inside Visual. Studio is, if you right-click on the project or any folder you can choose, add and then client-side library that opens the UI that lets us choose which libraries we want to bring in.

B

In this instance, I'm going to look for Twitter, bootstrap intellisense shows me some similarly named items and when I press tab it Auto populates it with the latest version.

B

In this case, I can see it's version, 4.1 three I'm happy with all that and it's it's suggested that I put it in the dub-dub-dub root, live Twitter, bootstrap, directory nice and clean I'll, say install as I do that it runs the libman restore operation which you can see in my output window has brought in lots of files and they are now available in my project here, and these are all the files from Twitter bootstrap that it's brought in okay.

B

So that's the basic case just adding in a simple library, but there's more configuration you can do for a start. Let's say we wanted you bring in jQuery on a different version. So again, I can add.

B

Client-Side library choose jQuery, that's tab and I get all I get the latest version, but I can actually filter to different versions and, let's say I want three point: 2.0 tap out of that and I can see all the files available there now I might not want all the files in this library sure sometimes I just want one or two right.

B

In this case, when using the CDN j/s provider, you can choose specific files and we will suggest jQuery M&J, yes and that's come because it's looked into the package that this library came from and it's it knows this is the recommended file I'd like that, but I also want the jQuery min and the slim so I'm going to take those files there and I can choose where the files go by default, it's going to suggest a folder name that matches the library name, but just for fun.

B

I might just want this to be in a Lib directory and I'll, say install so now all those files are going to get dumped into this Lib directory here. Also, interestingly, you can see that it's created a file called Lib man JSON. This is the library manager manifest. This is where it stores and records all the information about the libraries that we bring in to your project, and here you can see the two that we've created already.

B

First, there was Twitter bootstrap for point, one point three, and then there was jQuery and in this case it's listed files. If no files are listed, it just brings down all the files, and you can see those are here. You can make edits to this file to work with the libraries that are there and in this case I've decided I want my jQuery back in the dub-dub-dub root directory, and you can see. Intelli sense offers the folders that are available in your project.

B

Okay, when I save this, it automatically triggers a restore which then removes those old files and brings them back into this directory here. So now,.

A

What I'm, seeing this is pulling down files and making it easy for me to grab packages off the web? Does it do anything with the way that I build or deploy my applications? Is it affecting how these are packaged up and sent out, or is it more just for pulling down at compile time? That's.

B

A good question: its primary purpose is for acquiring files at design-time, okay, however, it does have the benefit of assisting with publishing more so much in the source control and that all these library files, which are common and easily fetched from everywhere, don't necessarily need to be committed to the repo. When write.

A

B

And soon I'll be showing you how we can clean these files and enable restore on build, but we'll get to that in a moment.

A

B

Great, how about I'll show you some more features of the Lib man tool? Okay, so where were we we've I've shown you the basic we've done versions: let's have a look at the different providers by default, we've recommended the CDN j/s provider, because it has a nice way of summarizing and giving you small subsets of files that you need, but there are two other providers in the box we have the unpackage provider, which has an even larger array of libraries available. Okay, they pull them directly from NPM.

B

In this case, let's have a look at the difference. I can search for jQuery here, version 3.3 point one, and if we look at the wait a little while for to bring all the files in as it's actively downloading these files right now- and we can see that there's a a lot of files if we used on package for jQuery we'd get all of these files and in the past this has been the way some people have done it before and then you can manually pluck the files you want to put them in the directory.

A

Right, but this is actually pulling down the source to jQuery, which we probably don't need right. We just want to use the library exactly.

B

That's right, but it's nice to know that it's there, if you need it another provider that we've given is the file system provider. This is useful if you happen to have files on an internal server or on your own machine sure. In this case, I've got my own library sitting on my C Drive, so I'm gonna look for C libs and what's called Mike my calendar, so I'm going to choose the my calendar there.

B

It is, and so I can use the file system provider to bring files from another folder and copy them into my web application here.

B

So those are the different features of the add library, client, side, library UI with the providers, the libraries it's worth, noting that there's a format that we follow for libraries and versions which you've seen me use already, and that is the library name with an at rate, followed by the version and and that's fairly consistent across usages of many of these client-side library management tools is.

A

There a way to ask for just the latest jQuery, or do you specify a specific version every time we.

B

Must specify a version so that when somebody tries to restore this in a year's time, it knows which version to.

A

Focus the right version and there's no surprises because it changed correct.

B

But we do help, you find the latest version by offering it to you by default. So as soon as you type jQuery and press tab, oops typing Korean press tab, we automatically offer the latest version speaking of versions, it would be interesting to see how we can manage the different versions inside the library manifest file, so I'm going to jump over now and show you some of the things that we can do in the live. Man manifest file. Okay, so, first, if you wanted to lead a library, this is where you do it.

B

You could just delete the files straight from here, but then they'll be restored on built right. So instead you can simply just delete the library block when you press save it triggers a restore, and that removes the offending files.

B

Another thing you can do is: if you want to delete a library, you can click and use the lightbulb here to uninstall Twitter bootstrap, okay, that will remove that library entry and take the files away from the project. Third thing you can do from inside here is to use the light bulb, which is available on alt-enter. If you see it and then check for updates, it's just discovered, there's a later version of jQuery and if I choose this stable version, it will update the live.

B

Man manifests and when I save it restores and now I get the latest version over here. So.

A

Question about this to not to jump ahead if you're going to cover this, but some packages have dependencies on other packages right. Is this just pulling down the full package tree because that's what's on the provider network, or does it do any looking through to other defendants.

B

That's a really good question and a clear distinction between our tool and many of the others out there. So library manager does not do dependency management. So if you're bootstrap requires a certain version of jQuery or jQuery validation, it's up to you to make sure you get the right version supposed, but.

A

Then you're locked in with the manifest and you're guaranteed to pull those down because it's described right there, that's right, yeah, okay, so.

B

What else can we do here? We, the before I move off I'll, show that we have intellisense inside the libman JSON file, so you can create new libraries. First, it's good idea to choose your provider if you're going to pick another provider- and you can see that we have the different providers available there. But if you are using the same provider, that's currently registered as the default provider, then it's redundant and you don't need to declare a provider, but you can just go straight into the library and say bootstrap and watch us.

B

The intellisense assists you there again with the versions. If you want to choose a destination, then you can put a destination in here and it's helping me to choose the folders that I have available today. Nice and I'll put that into bootstrap one other thing you can do is you can declare a default destination? Let's say you want everything to go into scripts, then you don't need to put a destination in any and.

A

It's just gonna name it as the package name, underneath that folder no.

B

You're it flattening it it'll put everything in that direct like. So. If you want something under that, then you put in a subdirectory underneath, got it so I'll clear out those changes and if I'd have saved this file, it would have brought that down, but I'm not going to I'm going to delete that hit. Save now, there's a couple more things that we've introduced into the visual studio UI to allow us to work with live man and that is to clean, restore and enable restore on build.

B

So here, I have my jQuery library, but if I'm going to check these files into source control, I don't need these files. So I want to clean this library. I can right click on the Lib man, JSON file inside the solution, Explorer and choose clean, client-side libraries that deletes all those files from there. Okay they're still available in my manifest. So now, if I right click, I can restore client-side libraries and all those files will come right back so.

A

This has taken something that we might have done manually in the past than just automating it for us, using the manifest.

B

That's the idea, yes, very similar I supposed to how nougat will restore server side packages when you need now. If we want this to restore the files on build so that user doesn't have to come in and manually, click this and say, restore or open his file and save that we can enable the setting enable restore client-side libraries on build.

B

What that will do is bring a new get package into the project, ok, which will cause it to trigger a build trigger or restore each time the files are built so I've just set that now you'll see how did the dependencies note there's a new you get the reference for library manager, dot build! So now. If I clean these files simply by kicking off a build, it should restore those files back into my project and there they are very.

A

B

All right thanks the other, as well as the tooling we provided within Visual Studio. We also provided a CLI command line interface for dealing with a library manager. Okay, the command line interface is very important for three main reasons. There are times when you must use the CLI. One of them is if you're working cross-platform as visual studio tooling, is only available in Windows at the moment sure.

B

Another reason is: if you are not working in a web project, if you don't have a CS proj, that's associated with a web project type live man won't run inside Visual Studio. So in those cases you can trigger a live man from the command line. Okay and a third sort of a tricky situation is if you want to bring in multiple different versions of the same library or have different library manager, file for separate subsections or folders of your project.

B

You can have as many live man files as you like one per folder, and if you execute a live man commands from that folder, it will execute the main commands on that file. Okay,.

A

B

For those three reasons, it's handy to have the CLI available and to demonstrate the CLI, and today we've brought in the engineer responsible for building it for a fool and so with. If it's all right, I'd like to hand over to preform, so he can demonstrate how we use the CLI for the event sounds great Destin.

C

So here I have residually of code on an empty folder. As Justin mentioned, we don't need a CS proj to work with the CLI for library manager, so the library manager CLI is built as a global tool for dotnet core. Ok.

A

C

You can install it as a global tool using the command dotnet to install the package. Name is Microsoft web dot, library manager, dot, CLI, and you need to install it as a global tool. So G I already have it installed on this machine. So once you have installed, all you have to do is type live man and you have the command ready to run so.

A

This is great, so, if I'm doing dynacord evelopment, for example, on the linux machine or a.

C

A

I'm not using Visual Studio I can just pull in the CLI. Exactly that's gonna. Give me the suite of commands. You fantastic and.

C

The CLI basically gives you access to all the features that just in just showed in Visual Studio. So, let's start by so this is an empty folder. So, let's start by installing a library called jQuery, so here you'll notice that I'm just typing jQuery, because I want to install the latest version. Ok,.

A

C

Not providing a version for it, so it's asking me for a default provider and suggesting CDN Jas I'm, just going to say yes to that, and it's also recommending that I put the jQuery library inside a folder named lib, slash jQuery, which is the package name for this library. So I'm going to say yes to that, and we have the Lib folder created here with jQuery files inside it and a live man Jason manifest file which has the jQuery with the version 3.3.4, even though I did not specify which words and I wanted here.

C

So it basically puts down the latest version for jQuery. Ok,.

B

C

Let's install another one for say, Y rjs and for whatever reason, I'm, not installing the latest version for this I'm, installing 2.3 dot and I also want to so as before. You saw that it asked you for a destination because I did not provide one on the command line, but I can do that by passing D, so I'm just going to say Lib and require so here it won't prompt me for that. I could have changed on the prompt as well. Ok,.

C

So the syntax for giving the name and version is similar to what we do in Visual Studio. It was it's basically operating on the same Lippman file, so you could basically take the libman file that is generated by the CLI and use it and visual studio and vice versa, as well. Ok,.

A

C

So, let's add one more so lipman' install Twitter, bootstrap and.

A

What it does the first time you use it, it's gonna create the manifest file for you and then, after that, it's smart.

C

A

C

Venture yep yep.

C

So bootstrap is added, so it's pretty easy to add libraries. So let's say we want to update required rjs to the latest version. So for that we just have a different command, Libman update and then just the library name. So this will update it to the latest. If we wanted to update it to a specific version, we could do that as well using 2.2.1 and that would update it to 2.2.1, but let's just update it to the latest one.

C

So here you see it is updated to 2.3.6 and it is also restoring at the same time to bring in the latest files all right. So let's go back here. So another thing that you would do using the CLI is uninstall, a library that you have installed. So that's uninstall, Twitter bootstrap, so the command is again Libman uninstall and the library name that you want to uninstall hit enter, and it removes that removes the files that were added because of that particular library. And then the clean and restore operations are also available on the CLI.

C

So you just say: Lib man clean, and it removes all the files that were restored because of this manifest but maintains the manifest as it was. And then, when you want those files back, you just have to do Lib and restore, and you have all the files back. So.

A

It sounds like if I have a build pipeline and.

C

A

Don't use msbuild for this. I can still use library manager.

C

A

I can use the command line tool and just script. The restore as part.

C

Of that build process, cutting.

A

Great that's fantastic! Now, one of the things I've noticed: we've talked a few times, I'd notice it from the syntax for the packages, and you mentioned it earlier about NPM. As a package manager. Can we talk a little bit about other solutions that are out there and how they may or may not compare absolutely.

B

They're, alternative solutions for package management, NPM, is very popular and has been well used and is well used today in the community, people have asked whether or not live men will replace NPM and have expressed concerns about it. Not doing everything. Npm does and the fact is live man was never intended to replace NPM or yarn, or some of the other package manager systems out there. It's simply a new one that we've built to replace Bower originally sure, and its purpose is simply to fetch client-side library files and place them in your project.

B

That's something that that second part placing them in your project is something that's not currently covered by any other tool today. So people cover it with. Let's say you use NPM to bring your files down and then use grunt or gulp that I'll place.

C

B

In the in the correct place, Lib man offers both client-side library acquisition as well as placement. So what we say is if you're happy using NPM continue to do so. There's no need to change. If you were using Bower you'd probably want to move off and live. Man is a good solution for that sure.

A

And it sounds like if I'm a.net, developer and I'm building a project that doesn't have node in it. For example, why bring in a dependency if I've got a tool, that's integrated directly into that's.

B

One of the main benefits of using live man is that if you don't need NPM or node for anything, then you can keep your projects clean and you don't need to bring in all sorts of external tools that you just don't need and just to pull jQuery MnDOT jus into your projects, nice, very good. So users can fetch a library manager today, as it's now available in version 15.7 of Visual Studio 2017, and if they want to get hold of library manager.

B

The tools are available in the asp.net and web development workloads which I have up on my screen to show you, if you run through the visual and studio installer, and you have the asp.net and web development workload showing, then it will come with live man and all the tools for library manager. The other way to acquire the man is to fetch it from the CLI. As we spoke about earlier at nougat, you can go and get the library manager sealife directly for nougat.

B

We also have library, managers open sort, so you can see what we're building and you can engage with us through the issues on github. So we're running a library manager, project on github at asp.net, slash library manager and if you have any feedback or want to make some comments, there's an issues register and you can see the code that we're building and even pull live, updates and run it yourself other than that I'd say yeah. The docs are available. So if you need more help consult the Microsoft docs for live man, fantastic.

A

Thank you so much for sharing this with us and it's interesting to see a tool that not only integrates with Visual Studio if I'm a right-click and kind of add a project and that's my workflow versus a command line tool set so appreciate. You demoing that and sharing with us library manager, sure.

B

A

Having sense but having yes thank you.