ASP.NET Core 2.2 - Manage Client-Side Libraries

This article will cover updating client libraries. I will assume you have created a new ASP.NET Core 2.2 Razor Pages project. Let's start by creating a libman.json file.

Right click on the project then click Manage Client-Side Libraries. If a libman.json file is not found, it will be created.

Default for new libman.json:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": []
}

The new web application template uses 4 libraries: bootstrap, jquery, jquery-validation and jquery-validation-unobtrusive. Bootstrap and jquery-validation have updates available at the time of this article.

libman.json for bootstrap, jquery, jquery-validation and jquery-validation-unobtrusive:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "twitter-bootstrap@4.3.1",
      "destination": "wwwroot/lib/bootstrap/dist/"
    },
    {
      "library": "jquery@3.3.1",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "jquery-validate@1.19.0",
      "files": [
        "additional-methods.js",
        "additional-methods.min.js",
        "jquery.validate.js",
        "jquery.validate.min.js"
      ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "jquery-validation-unobtrusive@3.2.11",
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    }
  ]
}

You should verify the updated files by opening each file and checking the version. I had to clean and restore a couple of times with my article project. Right click on libman.json.

You have updated the local libraries, but our production environment settings use CDN links. Open _layout. cshtml in the Pages\Shared folder. The first CDN link is for bootstrap.min.css.

_layout. cshtml > bootstrap.min.css link:

<environment exclude="Development">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          crossorigin="anonymous"
          integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>

You not only need to update the href attribute, you must update the integrity hash. Browse twitter-bootstrap CDN library listings. Select 4.3.1/css/bootstrap.min.css > Copy Link Tag with SRI.

Paste the link inside the environment tag.

_layout. cshtml > bootstrap.min.css link with new link:

<environment exclude="Development">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" 
          integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          crossorigin="anonymous"
          integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>

Merge the attributes.

_layout. cshtml > bootstrap.min.css link with new attributes:

<environment exclude="Development">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY="
          crossorigin="anonymous" />
</environment>

The template is already configured for jQuery 3.3.1 jquery.min.js, but you need to update bootstrap.bundle.min.js.

_layout. cshtml > bootstrap.bundle.min.js link with new attributes:

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"
    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
    integrity="sha256-fzFFyH01cBVPYzl16KT40wqjhgPtq6FFUB6ckN2+GGw="
    crossorigin="anonymous">
</script>