How to use LibMan in ASP.NET Core With Visual Studio?
In ASP.NET Core we have a Client Side Library Management tool which help us to manage our Client Side files. Visual Studio has built-in support for LibMan in ASP.NET Core projects. With few configuration it's easy to mange Client Side files.
Prerequisites
- Visual Studio 2017 version 15.8 or higher
LibMan allow us to add library filse in two different ways,
- Add Client-Side Library dialog box
- Manually configure libman.json file
1- First let's try to configure libman.json file,
When we Right Click on Manage Client-Side Libraries,
We get libman.json file with blank configuration structure like below,
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": []
}
Which has version, defaultProvider and a blank libraries array where we can add our packages that we want to add. It has good tooling support like images shown below,
In this way we can set all our needed packages, a files option allows us to add only selected files which is very good we add what we need, and if we leave blank then it will add all the files of that library.
My final libman.json file look like,
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.3.1",
"destination": "wwwroot/lib/jquery",
"files": [
"jquery.min.js"
]
},
{
"library": "twitter-bootstrap@4.1.3",
"destination": "wwwroot/lib/bootstrap",
"files": [
"js/bootstrap.min.js",
"css/bootstrap.css",
"css/bootstrap-grid.min.css",
"css/bootstrap-reboot.min.css"
]
},
{
"library": "angular-google-analytics@1.1.9",
"destination": "wwwroot/lib/Angular",
"files": []
}
]
}
A more options also can be found in https://github.com/aspnet/Docs/blob/master/aspnetcore/client-side/libman/samples/LibManSample/libman.json
With libman.json we even can uninstall our library if needed or check for updates a UI looks like,
Once we are done our configuration and if we build or force Client-Side Library manager to restore files it will restore the files in configured location. So Configure once and restore it when you need it.
We can find restore option after right lick on libman.json file, which is looks like,
After restore my wwwroot folder looks like,
After the restore it will modify our .csproj file for the selected location like,
<ItemGroup>
<Folder Include="wwwroot\" />
</ItemGroup>
So it's seems very easy, just few lines and we are done. Now if we like to add packages with Add Client-Side Library dialog then, after Right clicking on project file we can see something like,
Now we get dialog box like below,
I this dialog box explain what we need to do. So both option seems cool, just start using it and get free from remembering what you had included from where. Hope it will help us.