How to Use Npm with ASP.NET Core

How to use npm with ASP.NET Core

By publishing your whole node_modules folder you are deploying far more files than you will actually need in production.

Instead, use a task runner as part of your build process to package up those files you require, and deploy them to your wwwroot folder. This will also allow you to concat and minify your assets at the same time, rather than having to serve each individual library separately.

You can then also completely remove the FileServer configuration and rely on UseStaticFiles instead.

Currently, gulp is the VS task runner of choice. Add a gulpfile.js to the root of your project, and configure it to process your static files on publish.

For example, you can add the following scripts section to your project.json:

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

Which would work with the following gulpfile (the default when scaffolding with yo):

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

How to use NPM and install packages inside Visual Studio 2017?

To avoid navigating manually to the correct directory use the "Open Command Line" extension from Mads Kristensen. It is available for free in the Marketplace. You find it here.

Once installed you can open a command prompt conviently directly from within Visual Studio.

Tipp: Use the Keyboard Shortcut ALT+Space instead of the context menu to open the command prompt.

You can then run your npm command:

npm install react-bootstrap-typeahead

As a side note: As of npm 5.0.0, installed modules are added as a dependency by default, so the --save option is no longer required.

Update 2019:

Developer Command Prompt and Developer Power Shell are now integrated into Visual Studio 2019 ( 16.2 Preview 2 ) - no need for an extension anymore.

You find them under Tools/Command Line

By default no shortcut is assigned - so you have to do this yourself.

Adding npm webpage to my ASP.net Core App

According to your description, if you want to use npm to install the package, I suggest you could refer to below steps:

1.You should make sure you have installed the npm

2.You should add the package.json file, right-click the project in Solution Explorer and choose Add > New Item. Choose the npm Configuration File, use the default name, and click Add.

If you don't see the npm Configuration File listed, Node.js development tools are not installed. You can use the Visual Studio Installer to add the Node.js development workload. Then repeat the previous step.

3.Include one or more npm packages in the dependencies or devDependencies section of package.json. For example, you might add the following to the file:

"devDependencies": {
   "gulp": "4.0.2",
   "@types/jquery": "3.3.33"
}

More details, you could refer to this article.

How to auto install npm modules when I build ASP.NET Core project

Your config is correct but that is only work for publish your project add this to your csproj file

 <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

This will assure your project run npm install before you start ASP.Net Core project

---

Related Topics