ttmind

Main Navigation

ttmind
  • jim-jams
  • Tech
  • Positive
Login

Login

Facebook Google

OR

Remember me Forgot password?

Don't have account? Signup here.

Sort by Categorys

.Net

PHP

Java

JavaScript

Database

Server

Client Side

Tools

Artificial Intelligence

Cloud

Hybrid Development

Event

Smart City

Education

Security

Scrum

Digital Marketing

APP Development

Business

Internet

Simulation

Art

Network

Microservices

Architecture

Technology

Leadership

    Top Articles

  • How Does Social Media Bring People Together?
    TTMind Author
  • How to read appSettings JSON from Class Library in ASP.NET Core
    Anil Shrestha
  • Printing Support In Asp.Net Core
    TTMind Author
  • HOW TO EXTRACT TEXT FROM IMAGE USING JAVASCRIPT (OCR with Tesseract.js)?
    Prakash Pokhrel
  • Images Upload REST API using ASP.NET Core
    Prakash Pokhrel
  • Related Topic

  • How to read appSettings JSON from Class Library in ASP.NET Core
  • Printing Support In Asp.Net Core
  • Images Upload REST API using ASP.NET Core
  • How to use IActionFilter, IAsyncActionFilter in ASP.NET Core MVC?
  • ASP.NET CORE - Blazor CRUD operation using ADO.NET
  • Tech
  • About Us
  • Contact Us
  • TechHelp
  • PositiveHelp
  • Jim-Jams Help
  • Terms & Conditions

© Copyright ttmind.com

Main Content

How to use LibMan in ASP.NET Core With Visual Studio?

.Net .Net Core about 7 years ago || 9/19/2018 || 5.7 K View

  • Hide

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,

  1. Add Client-Side Library dialog box
  2. 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.

  • 1
  • 0
  • 0
    • Facebook
    • Twitter
    • Google +
    • LinkedIn

About author

Alok Pandey

Alok Pandey

Love to share what I know.

Reset Your Password
Enter your email address that you used to register. We'll send you an email with your username and a link to reset your password.

Quick Survey