ASP.NET Core – Easy Transition of Bower to NPM

UPDATE (Oct 16, 2018):  I now rely on Libman for my front end management.  I use its 3 different providers to grab the libraries off of cdnjs, unpkg (supposed to include all npm) and filesystem for local files.  See post:  Using Libman Providers to Coral Front End Libraries

I love me some Bower, even with the shadow looming over it that it’s time is done.  Recently, though, it started to do something weird with just restoring/replacing packages that really began to cause problems with my project (and make for some seriously messy 99* commits).

I can do simple task running, etc but still very much a noob to packaging.

Here was my easy solution for removing Bower and switching over to NPM (and accessing those packages through Views).

The Laziest NPM Install Ever

For this, I already had two packages installed via:  Tools > Extensions and Updates

 

For NPM to run, you need a package.json file (similar to bower.json).

  • Right click your project
  • Quick install package
  • Choose NPM from dropdown
  • Leave package blank
  • Hit install

This created the basic package.json file for me.  I know, lazy.

Configure Your Packages

I went into package.json, and modified it.  The great thing about this is it DOES have Intellisense, so as you type “jquery” : (for example) a little menu pops up prompting you for version.  My package.json file:

{
  "name": "Project",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-mask-plugin": "1.14.13",
    "bootstrap": "v4.0.0",
    "font-awesome": "4.7.0"
  }
}

 

Under Dependencies > Right click NPM > Restore Packages.

This creates a node_modules folder (it is not included in project so you will have to select all files to see it).  You want to KEEP IT LIKE THIS.  It brings in a lot of files you do not need for production.

The next problem was how to include these files (if node_modules is not included in project) in your Views.

For development there’s a temporary solution:  add it as a static file in your Startup.cs and there’s many other options (using Gulp to copy over needed files, etc) but I preferred a simpler approach… I added it to my bundleconfig.json.

 

Configure to Access From View

I already heavily use this bundleconfig.json to bundle and minify various packages of files I need for various situations.  Currently I have two packages: one named data.min.js (which features some added data-grid files) and site.min.js (a basic set of files to get site going).

So, in bundleconfig.json, I referred to the packages I NEED from the node_modules folder.  Here is an excerpt from my bundlerconfig.json file:

{
  "outputFileName": "wwwroot/js/data.min.js",
  "inputFiles": [
    "node_modules/jquery/dist/jquery.js",
    "node_modules/jquery-validation/dist/jquery.validate.js",
    "node_modules/bootstrap/dist/js/bootstrap.js",
    "node_modules/jquery-mask-plugin/dist/jquery.mask.js",
    "wwwroot/js/jquery.dataTables.js",
    "wwwroot/js/dataTables.bootstrap4.js",
    "wwwroot/js/setDataTable.js",
    "wwwroot/js/site.js"
  ],
  // Optionally specify minification options
  "minify": {
    "enabled": true,
    "renameLocals": false
  },
  // Optionally generate .map file
  "sourceMap": false
}

 

Finishing Up

Set up is now done, now I simply go to Task Runner Explorer and I have various “update” options on NPM as well as the update and bundle options on bundleconfig.json.

 

I’m sure I’ll improve and change upon this as I learn more, but it was a quick and easy way to stop my dependence on Bower and start getting acquainted with NPM.