How to Install Bootstrap and JQuery

미연

·

2022. 4. 28. 11:45

Welcome to Programming Concepts, My name is Amit and this is part 25. of the Asp.Net Core MVC Tutorial. In this post, we will talk about Libman in .NET Core MVC.This is a continuation to Part 24. View Refresh Issue. So please watch it before proceeding to this one. I Shared the link in the description.LibMan stands for Library Manager which can be used to add library files like bootstrap, jQuery, etc. in ASP.NET Core Project.How can we Add library files using LibMan. We can do it in two ways.1. Use the Add Client-Side Library dialog. 2. Manually configure LibMan manifest file entries Lets use both the methods.Let's get back to visual studio and this is the project which we are working on.Let's say we need to add bootstrap in our project. As we discussed in our earlier posts, we know that we place our static files in wwwroot folder. Let me open this folder.And to add using client-side library dialog.Let's right-click on the project. Click on Add and then click on Client-side library.Alright!!so we got a popup or you can say a dialog and the first option is here is Provider.So provider is from where we want to download these libraries.If I click on dropdown, you can see there are four options to choose from.The second one is a file system, which means you want to download it from your project.Other three are the most popular CDN Service providers.CDN - Content Delivery Network. A content delivery network (CDN) is a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.I am not going to cover much of CDN here, just think of it as a service provider which gives you different client-side libraries to use and download via the internet. Alright!!Let's say we want to use bootstrap in our project, so you can select any service provider.Let's select jsdeliver and type bootstrap. So, you can see intelligence gives you options to download and install bootstrap. Similarly, if you select cdnjs and type bootstrap you will get the similar option.So, it's your choice which provider you want to select. Let me select the default one which is cdnjs. Then again, you have two options, whether you want to download complete bootstrap or specific files from that folder. Let me select "include all library files"Next is the target location where you want to save the files. By default, it saves to the lib folder. You can change the location if you want. For now, let it be as it is and click on Install.Within the lib folder you can see bootstrap is installed and at the root, one more file has been created "libman.json"If you open it you can see the metadata of bootstrap is stored.Let's get back to the slide. Option two is Manually configure LibMan manifest file entries. So what does that mean. Let's say we want to include jquery as well in our project, so instead of using Client-Side Library dialog, we can directly add jquery information in the Libman and that will automatically download it for you.Let's just copy and paste this along with a comma.Type jquery and you can get that information in IntelliSense. And the latest version is 3.6.0.In destination replace bootstrap with jquery and save the file. If you observed in solution explore it added Jquery as well.Alright!!Next is how to Uninstall library files.So to uninstall library files: step 1 is Open libman.json. So it is already open.Position the caret inside the corresponding libraries object literal.And then the third step is to Click the light bulb icon that appears in the left margin, and select then select UninstallIf you observer in the solution explorer, when I click on uninstall it will delete the dependent files.Alright!!!Alternatively, you can manually edit and save the Libman manifest file which is libman.json. The restore operation runs when the file is saved.So library files that are no longer defined in libman.json are removed from the project.Alright!!! Next isUpdate library versionSo to check for an updated library version First step is Open libman.json. Which is already open. Position the caret inside the corresponding libraries object literal.then click the light bulb icon that appears in the left margin. Hover and Check for updates. You can see the option is there Now let's say we want to use the older version of Jquery then, so we can update it just by changing the Libman manifest. Let's change it to 3.5.1 and save the file. You can see in the output window, it reinstalled the files.Alright!!Next is, if we want to use the latest version, again visual studio takes care of that. Just click on the bulb button. Check for updates and it will give you the latest stable version.Let's select that and save the file.Simple. Extremely simple. Microsoft makes it really easy for us Alright then. That's it in this post.If you have any queries related to the content of this post.Do ask me in the comments. Till then thanks for watching.