How to use npm packages with ASP.NET Core 3.1

we advise using NPM (https://www.npmjs.com/), the most commonly used package manager on the web, in conjunction with ASP.NET Core layout pages.

There is some great integration and support available for NPM in Visual Studio 2019; you just have to configure it correctly in order to use it efficiently.

Using NPM

Step 1 : Right-click on project, select Add | New Item, enter NPM in the search box, select npm Configuration File, and click on Add:

Step 2 : Adding the npm Configuration File should have added a package.json file. Update this file with the following content:

{
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "devDependencies": {
      "bootstrap": "4.3.1",
      "jquery": "3.3.1",
      "jquery-validation": "1.17.0",
      "jquery-validation-unobtrusive": "3.2.11",
      "popper.js": "1.14.7"
    }
}

Step 3 : Build the project and, following a successful build, there will be a folder named npm, which will be created under Dependencies. Right-click on npm and then click on Restore Package:

Step 4 : Copy  packages from ./node_modules/ to ./wwwroot/lib/. The static content can now be used within your application:

Step 5 : Update the View/Shared/_Layout.cshtml files:

<!DOCTYPE html>
 
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        @RenderBody()
    </div>
</body>
</html>

Step 6 : Update the View/Home/Index.cshtml files:

@{
        ViewData["Title"] = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    
        <div class="row">
            <div class="col-lg-12">
                <p>Comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up he it enjoyment agreeable depending. Timed voice share led his widen noisy young. On weddings believed laughing although material do exercise of. Up attempt offered ye civilly so sitting to. She new course get living within elinor joy. She her rapturous suffering concealed.</p>
                 <p>Is post each that just leaf no. He connection interested so we an sympathize advantages. To said is it shed want do. Occasional middletons everything so to. Have spot part for his quit may. Enable it is square my an regard. Often merit stuff first oh up hills as he. Servants contempt as although addition dashwood is procured. Interest in yourself an do of numerous feelings cheerful confined.</p>
            </div>
        </div>

Step 7 : You can test your application by pressing F5, or by clicking Debug on the Visual Studio 2019 menu and then Start Debugging

Add Comment