Adding Client-Side Resources through LibMan

To ensure that the Telerik UI components in your application render correctly, you must provide the required client-side JavaScript and CSS files. This guide shows how to import these client-side assets in your project by using LibMan and WebPack.

Library Manager (LibMan) is a client-side library management tool. The supported CDNs include CDNJS, jsDelivr, and unpkg. The selected library files are fetched and placed in the specified location within the ASP.NET Core project.

To provide the client-side web assets by using LibMan:

1. Add a libman.json file to your ASP.NET Core application following the Microsoft guidelines.

2. Add the following configuration to the libman.json file to fetch the library in the specified destination:

   {
   "version": "1.0",
   "defaultProvider": "cdnjs",
   "libraries": [
       {
       "provider": "unpkg",
       "library": "@progress/kendo-ui@2024.1.319",
       "destination": "wwwroot/lib/kendo-ui/2024.1.319"
       }
   ]
   }
   

   This step uses unpkg to load the Kendo UI library distributed on NPM. The scripts in the NPM package are not usable in the browser. This requires you to use a bundler such as WebPack.

3. Generate a license file by following the instructions in the Using Script License File article.

   As of the R2 2022 release, the @progress/kendo-ui NPM package requires a script license activation.

4. Add the following files, containing the configurations provided below:

   • webpack.config.js and package.json files to the wwwroot folder of the application.
   • entry.js file in the wwwroot/js/ folder to specify the scripts that should be bundled.

   const path = require('path');
   var webpack = require("webpack");
   
   module.exports = {
       plugins: [
           new webpack.ProvidePlugin({
               $: 'jquery',
           })
       ],
       entry: {
           site: './js/entry.js'
       },
       output: {
           filename: 'bundle.js',
           path: path.resolve(__dirname, 'dist')
       },
       resolve: {
           extensions: ["", ".js", "min.js"],
           alias: {
               'jquery': path.join(__dirname, 'node_modules/jquery')
           }
   
       },
       devtool: 'source-map',
   };
   

   {
   "version": "1.0.0",
   "name": "asp.net",
   "private": true,
   "dependencies": {
       "jquery": "^3.6.0",
       "jquery-validation": "^1.19.3",
       "jquery-validation-unobtrusive": "^3.2.12",
       "bootstrap": "^4.6.0",
       "popper.js": "^1.16.1"
   },
   "devDependencies": {
       "css-loader": "^5.2.0",
       "source-map-loader": "^0.1.5",
       "file-loader": "^6.2.0",
       "style-loader": "^2.0.0",
       "url-loader": "^4.1.1",
       "webpack": "^5.52.1",
       "webpack-cli": "^4.6.0"
   },
   "scripts": {
       "build": "webpack"
   }
   }
   

       require("jquery")
       window.$ = window.jQuery = $
   
       require("../lib/kendo-ui/2024.1.319/js/kendo.all")
       require("../lib/kendo-ui/2024.1.319/js/kendo.aspnetmvc")
   

   Since version 2022.3.1109 the Kendo UI scripts can be acquired as ECMAScript. In this case, you will replace the js/kendo.all part with:

       require("../lib/kendo-ui/2024.1.319/mjs/kendo.-componentName-")
   

   Additional information you can find in the dedicated ECMAScript Modules article

5. Once LibMan has fetched the Kendo UI client-side files, navigate to the wwwroot folder and execute the following commands:

   • npm install to install the dependencies in the local node_modules folder.
   • npm run build to bundle the scripts specified in the entry.js file.

   The result of the bundling will be a bundle.js file output in the wwwroot/dist/ folder.

6. In the _Layout.cshtml, file add a reference to the desired theme, the bundled scripts, and the license file kendo-ui-license.js:

       <link rel="stylesheet" href="~/lib/kendo-ui/2024.1.319/css/web/kendo.default-v2.css" />
       <script src="~/dist/bundle.js"></script>
       <script src="./kendo-ui-license.js"></script>
   

See Also

• Using Local Files to Add Client-Side Resources
• Using CDN to Add Client-Side Resources
• Creating Your Own Custom Script Bundles with Client-Side Resources