The Freshest Blend

Building the latest version of Bootstrap with Node Package Manager (npm)

by JamesQMurphy | June 2, 2019

Adding npm and package.json

In my previous post, I created a boilerplate MVC web project. The goal was simply to break ground... the first step on my thousand-mile journey. In more practical terms, I wanted to establish the base toolset that would be needed to build the project. I also wanted to keep that toolset minimal and generic... anyone who wanted to build the project shouldn’t need to install dozens of specialized tools. So far, the only pre-requisites are Visual Studio 2017 and ASP.NET Core (which can be installed at the same time).

Enter a third pre-requisite: Node.JS. This is not an unreasonable pre-requisite; chances are, if you are a developer, then you already have it. Node.JS is also a pre-requisite for frameworks such as Angular and React. In fact, if you want to build Angular or React applications in Visual Studio, then you need to install Node.JS yourself. Node.JS is also used to build a custom Bootstrap.css file (it can be done via NuGet, but Node.JS is the primary way to do it). I'll cover building Bootstrap in a later post; for now, I'll just use Node.JS (specifically, Node Package Manager) to download Bootstrap.css and copy it to the proper folder.

creating package.json

Saving it creates node_modules, but not necessarily package-lock.json running npm install does

Tried this at first

"copy-jquery" : "xcopy "node_modules/jquery/dist/*.*" "wwwroot/dist/jquery/*.*" /F /Y"

Using xcopy works, but it isn''t recommended since it''s an OS command.

Tried using npx, but it brought in a whole bunch of packages, plus it flagged a package for audit (regex denial-of-service)

Used copyfiles:

"copy-jquery": "copyfiles node_modules/jquery/dist/** wwwroot/dist/jquery --up 3 --verbose"

Works, but installs over 70 packages!

Made additional for jquery-validation and jquery-validation-unobtrusive. And bootstrap.

This works:

{
  "version": "1.0.0",
  "name": "jamesqmurphy.web",
  "private": true,
  "scripts": {
    "copydist": "npm run copydist-bootstrap && npm run copydist-jquery && npm run copydist-jquery-validation && npm run copydist-jquery-validation-unobtrusive",
    "copydist-bootstrap": "copyfiles node_modules/bootstrap/dist/** wwwroot/dist/lib/bootstrap --up 2 --verbose",
    "copydist-jquery": "copyfiles node_modules/jquery/dist/** wwwroot/dist/lib/jquery --up 2 --verbose",
    "copydist-jquery-validation": "copyfiles node_modules/jquery-validation/dist/** wwwroot/dist/lib/jquery-validation --up 2 --verbose",
    "copydist-jquery-validation-unobtrusive": "copyfiles node_modules/jquery-validation-unobtrusive/dist/** wwwroot/dist/lib/jquery-validation-unobtrusive --up 2 --verbose"
  },
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "copyfiles": "^2.1.0",
    "jquery": "^3.4.1",
    "jquery-validation": "^1.19.0",
    "jquery-validation-unobtrusive": "^3.2.11",
    "popper.js": "^1.15.0"
  }
}

Publishing

Removed dist from project, removed package.json and package-lock.json Added **/wwwroot/dist to .gitignore file

Added dist to published files using ResolvedFileToPublish based on https://stackoverflow.com/a/44429390/1001100

Updated _Layout.cshtml and _ValidationScriptsPartial.cshtml to point to ~/dist/lib instead of ~/lib