• Using npm for managing client-side libraries is a good choice (as opposed to Bower or NuGet), you're thinking in the right direction :)
• Split server-side (ASP.NET Core) and client-side (e.g. Angular 2, Ember, React) projects into separate folders (otherwise your ASP.NET project may have lots of noise - unit tests for the client-side code, node_modules folder, build artifacts, etc.). Front-end developers working in the same team with you will thank you for that :)
• Restore npm modules at the solution level (similarly how you restore packages via NuGet - not into the project's folder), this way you can have unit and integration tests in a separate folder as well (as opposed to having client-side JavaScript tests inside your ASP.NET Core project).
• Use might not need FileServer, having StaticFiles should suffice for serving static files (.js, images, etc.)
• Use Webpack to bundle your client-side code into one or more chunks (bundles)
• You might not need Gulp/Grunt if you're using a module bundler such as Webpack
• Write build automation scripts in ES2015+ JavaScript (as opposed to Bash or PowerShell), they will work cross-platform and be more accessible to a variety of web developers (everyone speaks JavaScript nowadays)
• Rename wwwroot to public, otherwise the folder structure in Azure Web Apps will be confusing (D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public)
• Publish only the compiled output to Azure Web Apps (you should never push node_modules to a web hosting server). See tools/deploy.js as an example.

Visit ASP.NET Core Starter Kit on GitHub (disclaimer: I'm the author)

I give you two answers. npm combined with other tools is powerful but requires some work to setup. If you just want to download some libraries, you might want to use Library Manager instead (released in Visual Studio 15.8).

NPM (Advanced)

First add package.json in the root of you project. Add the following content:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "del": "3.0.0"
  },
  "dependencies": {
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "bootstrap": "3.3.7"
  }
}

This will make NPM download Bootstrap, JQuery and other libraries that is used in a new asp.net core project to a folder named node_modules. Next step is to copy the files to an appropriate place. To do this we will use gulp, which also was downloaded by NPM. Then add a new file in the root of you project named gulpfile.js. Add the following content:

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var nodeRoot = './node_modules/';
var targetPath = './wwwroot/lib/';

gulp.task('clean', function () {
    return del([targetPath + '/**/*']);
});

gulp.task('default', function () {
    gulp.src(nodeRoot + "bootstrap/dist/js/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/js"));
    gulp.src(nodeRoot + "bootstrap/dist/css/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/css"));
    gulp.src(nodeRoot + "bootstrap/dist/fonts/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/fonts"));

    gulp.src(nodeRoot + "jquery/dist/jquery.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.map").pipe(gulp.dest(targetPath + "/jquery/dist"));

    gulp.src(nodeRoot + "jquery-validation/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation/dist"));

    gulp.src(nodeRoot + "jquery-validation-unobtrusive/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation-unobtrusive"));
});

This file contains a JavaScript code that is executed when the project is build and cleaned. It’s will copy all necessary files to lib2 (not lib – you can easily change this). I have used the same structure as in a new project, but it’s easy to change files to a different location. If you move the files, make sure you also update _Layout.cshtml. Note that all files in the lib2-directory will be removed when the project is cleaned.

If you right click on gulpfile.js, you can select Task Runner Explorer. From here you can run gulp manually to copy or clean files.

Gulp could also be useful for other tasks like minify JavaScript and CSS-files:

https://learn.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1

Library Manager (Simple)

Right click on you project and select Manage client side-libraries. The file libman.json is now open. In this file you specify which library and files to use and where they should be stored locally. Really simple! The following file copies the default libraries that is used when creating a new ASP.NET Core 2.1 project:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "[email protected]",
      "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "[email protected]",
      "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "[email protected]",
      "files": [
        "css/bootstrap.css",
        "css/bootstrap.css.map",
        "css/bootstrap.min.css",
        "css/bootstrap.min.css.map",
        "css/bootstrap-theme.css",
        "css/bootstrap-theme.css.map",
        "css/bootstrap-theme.min.css",
        "css/bootstrap-theme.min.css.map",
        "fonts/glyphicons-halflings-regular.eot",
        "fonts/glyphicons-halflings-regular.svg",
        "fonts/glyphicons-halflings-regular.ttf",
        "fonts/glyphicons-halflings-regular.woff",
        "fonts/glyphicons-halflings-regular.woff2",
        "js/bootstrap.js",
        "js/bootstrap.min.js",
        "js/npm.js"
      ],
      "destination": "wwwroot/lib/bootstrap/dist"
    },
    {
      "library": "[email protected]",
      "files": [ "list.js", "list.min.js" ],
      "destination": "wwwroot/lib/listjs"
    }
  ]
}

If you move the files, make sure you also update _Layout.cshtml.

Install the Bundler and Minifier into Visual Studio Extensions

Then you create a bundleconfig.json and enter the following like :

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
 {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": false
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

So the bundler and minifier (gulp based) has access to the source files (which should be excluded from Visual Studio and also excluded from GIT) and puts them into the wwwroot as specified

only side effect every time you save it will run this (but you can set it to run it manually)

Instead of trying to serve the node modules folder, you can also use Gulp to copy what you need to wwwroot.

https://docs.asp.net/en/latest/client-side/using-gulp.html

This might help too

Visual Studio 2015 ASP.NET 5, Gulp task not copying files from node_modules

What is the right approach for doing this?

There are a lot of "right" approaches, you just have decide which one best suites your needs. It appears as though you're misunderstanding how to use node_modules...

If you're familiar with NuGet you should think of npm as its client-side counterpart. Where the node_modules directory is like the bin directory for NuGet. The idea is that this directory is just a common location for storing packages, in my opinion it is better to take a dependency on the packages you need as you have done in the package.json. Then use a task runner like Gulp for example to copy the files you need into your desired wwwroot location.

I wrote a blog post about this back in January that details npm, Gulp and a whole bunch of other details that are still relevant today. Additionally, someone called attention to my SO question I asked and ultimately answered myself here, which is probably helpful.

I created a Gist that shows the gulpfile.js as an example.

In your Startup.cs it is still important to use static files:

app.UseStaticFiles();

This will ensure that your application can access what it needs.

Much simpler approach is to use OdeToCode.UseNodeModules Nuget package. I just tested it with .Net Core 3.0. All you need to do is add the package to the solution and reference it in the Configure method of the Startup class:

app.UseNodeModules();

I learned about it from the excellent Building a Web App with ASP.NET Core, MVC, Entity Framework Core, Bootstrap, and Angular Pluralsight course by Shawn Wildermuth.

Shawn Wildermuth has a nice guide here: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

The article links to the gulpfile on GitHub where he's implemented the strategy in the article. You could just copy and paste most of the gulpfile contents into yours, but be sure to add the appropriate packages in package.json under devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream

Please excuse the length of this post.

This is a working example using ASP.NET Core version 2.5.

Something of note is that the project.json is obsolete (see here) in favor of .csproj. An issue with .csproj. file is the large amount of features and the fact there is no central location for its documentation (see here).

One more thing, this example is running ASP.NET core in a Docker Linux (alpine 3.9) container; so the paths will reflect that. It also uses gulp ^4.0. However, with some modification, it should work with older versions of ASP.NET Core, Gulp, NodeJS, and also without Docker.

But here's an answer:

gulpfile.js see the real working exmple here

// ROOT and OUT_DIR are defined in the file above. The OUT_DIR value comes from .NET Core when ASP.net us built.
const paths = {
    styles: {
        src: `${ROOT}/scss/**/*.scss`,
        dest: `${OUT_DIR}/css`
    },
    bootstrap: {
        src: [
            `${ROOT}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
            `${ROOT}/node_modules/startbootstrap-creative/css/creative.min.css`
        ],
        dest: `${OUT_DIR}/css`
    },
    fonts: {// enter correct paths for font-awsome here.
        src: [
            `${ROOT}/node_modules/fontawesome/...`,
        ],
        dest: `${OUT_DIR}/fonts`
    },
    js: {
        src: `${ROOT}/js/**/*.js`,
        dest: `${OUT_DIR}/js`
    },
    vendorJs: {
        src: [
            `${ROOT}/node_modules/jquery/dist/jquery.min.js`
            `${ROOT}/node_modules/bootstrap/dist/js/bootstrap.min.js`
        ],
        dest: `${OUT_DIR}/js`
    }
};

// Copy files from node_modules folder to the OUT_DIR.
let fonts = () => {
    return gulp
        .src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest));
};

// This compiles all the vendor JS files into one, jsut remove the concat to keep them seperate.
let vendorJs = () => {
    return gulp
        .src(paths.vendorJs.src)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(paths.vendorJs.dest));
}

// Build vendorJs before my other files, then build all other files in parallel to save time.
let build = gulp.series(vendorJs, gulp.parallel(js, styles, bootstrap));

module.exports = {// Only add what we intend to use externally.
    default: build,
    watch
};

Add a Target in .csproj file. Notice we also added a Watch to watch and exclude if we take advantage of dotnet run watch command.

app.csprod

  <ItemGroup>
    <Watch Include="gulpfile.js;js/**/*.js;scss/**/*.scss" Exclude="node_modules/**/*;bin/**/*;obj/**/*" />
  </ItemGroup>

  <Target Name="BuildFrontend" BeforeTargets="Build">
    <Exec Command="yarn install" />
    <Exec Command="yarn run build -o $(OutputPath)" />
  </Target>

Now when dotnet run build is run it will also install and build node modules.

I've found a better way how to manage JS packages in my project with NPM Gulp/Grunt task runners. I don't like the idea to have a NPM with another layer of javascript library to handle the "automation", and my number one requirement is to simple run the npm update without any other worries about to if I need to run gulp stuff, if it successfully copied everything and vice versa.

The NPM way:

• The JS minifier is already bundled in the ASP.net core, look for bundleconfig.json so this is not an issue for me (not compiling something custom)
• The good thing about NPM is that is have a good file structure so I can always find the pre-compiled/minified versions of the dependencies under the node_modules/module/dist
• I'm using an NPM node_modules/.hooks/{eventname} script which is handling the copy/update/delete of the Project/wwwroot/lib/module/dist/.js files, you can find the documentation here https://docs.npmjs.com/misc/scripts (I'll update the script that I'm using to git once it'll be more polished) I don't need additional task runners (.js tools which I don't like) what keeps my project clean and simple.

The python way:

https://pypi.python.org/pyp... but in this case you need to maintain the sources manually

I struggled with this going through a learning curve likely similar to the OP's experience. If you are reading this, I am assuming:

• You are using Visual Studio 2022 or a close variant.
• You have used the default scaffolding to create an AspNetCore MVC Web Application, which created a wwwroot/lib folder that contains subfolders with some version of bootstrap, jquery, and other supporting libraries.
• Maybe you are learning web development or are inexperienced with this particular dev platform.
• For whatever reason, you've opted to forego Microsoft's default tooling (LibMan) for dependent library management in favor of node/npm.

In my experience, LibMan doesn't boast the same wide-spread support by library creators in the way that other package managers such as npm do. The majority of advice you find online for how to deal with this is usually some variant of "Use npm + bundler X instead!"

The problem with this, as the OP discovered, is that no one ever talks about how to glue it all together. Like the OP:

• A node_modules folder now exists with the source libraries you need - most of which contains additional files that shouldn't be made a part of the content being served by your web application.
• Your wwwroot\lib folder isn't being updated and might even contain out-of-date packages (such as Bootstrap 4 installed when the solution was scaffolded, rather than version 5+).
• What html code you have written has <link> and <script> elements that reference minified files in wwwroot\lib.

I cannot claim to know best practices in this area, but my solution works for me and is elegant imho. Regardless, as the OP suspects, their solution is not the most ideal for a couple of reasons:

1. You don't want to publish your node_modules folder as the OP has done. It contains a lot of stuff that shouldn't be served by your web app.
2. Your html should not have to include <script> and <link> tags that reference files in node_modules (probably with some convoluted relative path if the folder and the project file where the files are needed are not even at the same level).

The Solution

Fortunately, npm itself has the tools to devise a solution. I won't claim this is the best or the most elegant, but it's the best and most elegant solution that I have been able to come up with for web app development in VS 2022.

If you read through the documentation here scripts | npm Docs, you will discover that you can tell npm to execute a command whenever the content of the node_modules folder changes. In my case, I created a mirror_node_modules.js file in the same folder as package.json and asked node to execute it.

Edit package.json and add the following line:

"scripts": {
    "dependencies": "node mirror_modules.js MyWebApp\\wwwroot\\lib"
},

Be sure to replace MyWebApp with the actual folder of your web application. Associating a command to "dependencies" tells npm to execute the command any time the node_modules folder is altered via npm.

Here is the javascript code for mirror_modules.js. This script:

1. Uses robocopy to mirror the entire node_modules folder to the target folder (in this example, MyWebApp\wwwroot\lib),
2. Removes any folders listed under the "devDependencies" node in package.json. These libraries are typically tooling libraries (like WebPack, Gulp, or some other bundler) and should not be served as content by your web app.
3. Removes the @types folder, which typically is only needed during development to resolve Typescript types. The Visual Studio build process is smart enough to look in the node_modules folder if it cannot find what it needs in wwwroot\lib.

const fs = require('fs');
const path = require('path');
const { exec } = require('child_process');

// This is the target library folder relative to where this script is executed.
// Example: MyWebApp\wwwroot\lib 
const targetLibFolder = process.argv[2];

// Mirror the entire node_modules folder to the target lib folder
const sourcePath = path.resolve(__dirname, 'node_modules');
const targetPath = path.resolve(__dirname, targetLibFolder);
const mirrorCommand = `robocopy "${sourcePath}" "${targetPath}" /MIR /XD .bin /XD .package-lock.json > nul`;

exec(mirrorCommand, (error, stdout, stderr) => {
   const exitCode = error ? error.code : 0;
   // Only error codes greater than 7 mean something bad happened
   if (exitCode > 7) {
      let errorMessage = 'Failed to execute command:\n';
      errorMessage += `   ${mirrorCommand}\n`;
      errorMessage += `   Exit Code: ${exitCode}\n`;
      errorMessage += `   STDOUT: ${stdout}\n`;
      errorMessage += `   STDERR: ${stderr}\n`;
      console.Error(errorMessage);
      process.exit(1);
   }
});

// Read the package.json file
const packageJsonPath = path.resolve(__dirname, 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));

// Get the devDependencies node
const devDependencies = packageJson.devDependencies || {};

// Iterate over its key/value pairs and forcibly delete devDependency libraries 
// since they do not belong in wwwroot/lib/
for (const packageName in devDependencies) {
   if (devDependencies.hasOwnProperty(packageName)) {
      const deletePath = path.resolve(__dirname, targetLibFolder, packageName);
      // Forcibly remove the directory
      exec(`powershell Remove-Item -Recurse -Force "${deletePath}"`, (error, stdout, stderr) => {
         const exitCode = error ? error.code : 0;
         if (exitCode > 0) {
            let errorMessage = 'Failed to execute command:\n';
            errorMessage += `   powershell Remove-Item -Recurse -Force "${deletePath}"\n`;
            errorMessage += `   Exit Code: ${exitCode}\n`;
            errorMessage += `   STDOUT: ${stdout}\n`;
            errorMessage += `   STDERR: ${stderr}\n`;
            console.Error(errorMessage);
            process.exit(1);
         }
      });
   }
}

// Remove the @types folder if it exists
const deleteTypesPath = path.resolve(__dirname, targetLibFolder, "@types");
exec(`powershell Remove-Item -Recurse -Force "${deleteTypesPath}"`, (error, stdout, stderr) => {
   const exitCode = error ? error.code : 0;
   if (exitCode > 0) {
      let errorMessage = 'Failed to execute command:\n';
      errorMessage += `   powershell Remove-Item -Recurse -Force "${deleteTypesPath}"\n`;
      errorMessage += `   Exit Code: ${exitCode}\n`;
      errorMessage += `   STDOUT: ${stdout}\n`;
      errorMessage += `   STDERR: ${stderr}\n`;
      console.Error(errorMessage);
      process.exit(1);
   }
});