How to use npm with ASP NET Core

Question

I m using npm to manage the jQuery  Bootstrap  Font Awesome and similar client libraries I need for my ASP NET Core application   The approach that worked for me started by adding a package json file to the project  that looks like this          version    1 0 0        name    myapp        private   true       devDependencies             dependencies          bootstrap     3 3 6        font-awesome     4 6 1        jquery     2 2 3          npm restores these packages into the node modules folder which is on the same level as wwwroot in the project directory     As ASP NET Core serves the static files from the wwwroot folder  and node modules is not there  I had to make a couple of changes to make this work  the first one  adding app UseFileServer right before app UseStaticFiles in my Startup cs file   app UseFileServer new FileServerOptions         FileProvider   new PhysicalFileProvider          Path Combine Directory GetCurrentDirectory      node modules          RequestPath   new PathString   node modules        EnableDirectoryBrowsing   true      app UseStaticFiles      and the second one  including node modules in my publishOptions in the project json file    publishOptions        include          web config        wwwroot        Views        node modules           This works in my development environment and it also works when I deploy it to my Azure App Service instance  the jquery  bootstrap and font-awesome static files get served well  but I m not sure about this implementation   What is the right approach for doing this   This solution came after collecting lots of bits of info from several sources and trying some that didn t work  and it seems a bit odd having to serve these files from outside wwwroot   Any advice will be greatly appreciated

User · Answer

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)

User · Answer

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        gt        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        gt        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     lt ItemGroup gt       lt Watch Include  gulpfile js js      js scss      scss  Exclude  node modules      bin      obj         gt     lt  ItemGroup gt      lt Target Name  BuildFrontend  BeforeTargets  Build  gt       lt Exec Command  yarn install    gt       lt Exec Command  yarn run build -o   OutputPath     gt     lt  Target gt    Now when dotnet run build is run it will also install and build node modules

User · Answer

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

User · Answer

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       quot version quot    quot 1 0 0 quot      quot name quot    quot asp net quot      quot private quot   true     quot devDependencies quot          quot gulp quot    quot 3 9 1 quot        quot del quot    quot 3 0 0 quot          quot dependencies quot          quot jquery quot    quot 3 3 1 quot        quot jquery-validation quot    quot 1 17 0 quot        quot jquery-validation-unobtrusive quot    quot 3 2 10 quot        quot bootstrap quot    quot 3 3 7 quot         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       lt binding AfterBuild  default  Clean  clean    gt     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    quot bootstrap dist js   quot   pipe gulp dest targetPath    quot  bootstrap dist js quot         gulp src nodeRoot    quot bootstrap dist css   quot   pipe gulp dest targetPath    quot  bootstrap dist css quot         gulp src nodeRoot    quot bootstrap dist fonts   quot   pipe gulp dest targetPath    quot  bootstrap dist fonts quot          gulp src nodeRoot    quot jquery dist jquery js quot   pipe gulp dest targetPath    quot  jquery dist quot         gulp src nodeRoot    quot jquery dist jquery min js quot   pipe gulp dest targetPath    quot  jquery dist quot         gulp src nodeRoot    quot jquery dist jquery min map quot   pipe gulp dest targetPath    quot  jquery dist quot          gulp src nodeRoot    quot jquery-validation dist   js quot   pipe gulp dest targetPath    quot  jquery-validation dist quot          gulp src nodeRoot    quot jquery-validation-unobtrusive dist   js quot   pipe gulp dest targetPath    quot  jquery-validation-unobtrusive quot          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   docs 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       quot version quot    quot 1 0 quot      quot defaultProvider quot    quot cdnjs quot      quot libraries quot                  quot library quot    quot jquery 3 3 1 quot          quot files quot      quot jquery js quot    quot jquery min map quot    quot jquery min js quot            quot destination quot    quot wwwroot lib jquery dist  quot                      quot library quot    quot jquery-validate 1 17 0 quot          quot files quot      quot additional-methods js quot    quot additional-methods min js quot    quot jquery validate js quot    quot jquery validate min js quot            quot destination quot    quot wwwroot lib jquery-validation dist  quot                      quot library quot    quot jquery-validation-unobtrusive 3 2 10 quot          quot files quot      quot jquery validate unobtrusive js quot    quot jquery validate unobtrusive min js quot            quot destination quot    quot wwwroot lib jquery-validation-unobtrusive  quot                      quot library quot    quot twitter-bootstrap 3 3 7 quot          quot files quot              quot css bootstrap css quot            quot css bootstrap css map quot            quot css bootstrap min css quot            quot css bootstrap min css map quot            quot css bootstrap-theme css quot            quot css bootstrap-theme css map quot            quot css bootstrap-theme min css quot            quot css bootstrap-theme min css map quot            quot fonts glyphicons-halflings-regular eot quot            quot fonts glyphicons-halflings-regular svg quot            quot fonts glyphicons-halflings-regular ttf quot            quot fonts glyphicons-halflings-regular woff quot            quot fonts glyphicons-halflings-regular woff2 quot            quot js bootstrap js quot            quot js bootstrap min js quot            quot js npm js quot                  quot destination quot    quot wwwroot lib bootstrap dist quot                      quot library quot    quot list js 1 5 0 quot          quot files quot      quot list js quot    quot list min js quot            quot destination quot    quot wwwroot lib listjs quot               If you move the files  make sure you also update  Layout cshtml

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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         lt binding Clean  clean   gt   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

User · Answer

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

User · Answer

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

[c#] How to use npm with ASP.NET Core

Examples related to c#

Examples related to asp.net-mvc

Examples related to npm

Examples related to gulp

Examples related to asp.net-core