Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/installation/getting-started-copy-client-resources.md

@@ -1,7 +1,7 @@
 ---
 title: Including Client-Side Resources
 page_title: Copying Client-Side Resources
-description: "Get started with Telerik UI for ASP.NET Core and learn about different ways of copying the client-side resources into Telerik UI for ASP.NET Core project."
+description: "Get started with Telerik UI for ASP.NET Core and learn about the different ways of copying the client-side resources into a Telerik UI for ASP.NET Core project."
 previous_url: /aspnetmvc-apps/mvc-6/getting-started-vscode, /mvc-6/getting-started-vscode, /getting-started/getting-started-copy-client-resources, /getting-started/installation/getting-started-copy-client-resources
 slug: copyclientresources_aspnetmvc6_aspnetmvc
 position: 6
@@ -97,6 +97,112 @@ To include the client-side resources, use any of the following approaches:
             ...
         </head>
 
+{% if site.core %}
+## Using LibMan
+
+[Library Manager (LibMan)](https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/?view=aspnetcore-5.0) is a client-side library management tool. The supported CDNs include [CDNJS](https://cdnjs.com/), [jsDelivr](https://www.jsdelivr.com/), and [unpkg](https://unpkg.com/#/). The selected library files are fetched and placed in the specified location within the ASP.NET Core project.
+
+The following guide shows how to include the client-side resources by using LibMan:
+
+1. Add a `libman.json` file to your ASP.NET Core application following the [Microsoft guidelines](https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-5.0).
+1. Add the following configuration to the `libman.json` file to fetch the library in the specified destination:
+
+    ```libman.json
+    {
+    "version": "1.0",
+    "defaultProvider": "cdnjs",
+    "libraries": [
+        {
+        "provider": "unpkg",
+        "library": "@progress/[email protected]",
+        "destination": "wwwroot/lib/kendo-ui/2021.3.914"
+        }
+    ]
+    }
+    ```
+
+    > 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]({% slug npmpackages_core %}#kendo-ui-professional-on-npm). This requires you to use a bundler such as [WebPack](https://webpack.js.org/).
+
+1. 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.
+
+    ```webpack.config.js
+    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',
+    };
+    ```
+    ```package.json
+    {
+    "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"
+    }
+    }
+    ```
+    ```entry.js
+        require("jquery")
+        window.$ = window.jQuery = $
+
+        require("../lib/kendo-ui/2021.3.914/js/kendo.all")
+        require("../lib/kendo-ui/2021.3.914/js/kendo.aspnetmvc")
+    ```
+
+1. 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.
+
+1. In the `_Layout.cshtml`, file add a reference to the desired theme and the bundled scripts:
+
+    ```_Layout.cshtml
+        <link rel="stylesheet" href="~/lib/kendo-ui/2021.3.914/css/web/kendo.default-v2.css" />
+        <script src="~/dist/bundle.js"></script>
+    ```
+
+{% endif %}
+
 ## See Also
 
 * [Introduction to Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})