https://github.com/lombiq/npm-targets

Some common NPM MSBuild targets and other utilities used in ASP.NET (Core) MVC and Orchard (Core) CMS development.
https://github.com/lombiq/npm-targets

asp-net asp-net-core asp-net-core-mvc msbuild npm orchard-cms orchard-core

Last synced: 8 months ago
JSON representation

Some common NPM MSBuild targets and other utilities used in ASP.NET (Core) MVC and Orchard (Core) CMS development.

• Host: GitHub
• URL: https://github.com/lombiq/npm-targets
• Owner: Lombiq
• License: bsd-3-clause
• Created: 2020-03-09T23:28:40.000Z (over 6 years ago)
• Default Branch: dev
• Last Pushed: 2025-10-16T19:51:30.000Z (8 months ago)
• Last Synced: 2025-10-17T22:26:58.387Z (8 months ago)
• Topics: asp-net, asp-net-core, asp-net-core-mvc, msbuild, npm, orchard-cms, orchard-core
• Language: C#
• Size: 120 KB
• Stars: 11
• Watchers: 7
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • License: License.md

Awesome Lists containing this project

README

          
# Lombiq NPM MSBuild Targets

[![Lombiq.Npm.Targets NuGet](https://img.shields.io/nuget/v/Lombiq.Npm.Targets?label=Lombiq.Npm.Targets)](https://www.nuget.org/packages/Lombiq.Npm.Targets/)

## About

Provides automatic NPM package installation and a custom NPM command execution before building a .NET project. This way it is possible for example to manage assets (e.g. .scss files or images) in a folder that will be automatically compiled into the _wwwroot_ folder on build, which then can be excluded from the version control system. These operations are optimized by running them only if the corresponding files have been changed.

We at [Lombiq](https://lombiq.com/) also used this utility for the following projects:

- The new [City of Santa Monica website](https://santamonica.gov/) when migrating it from Orchard 1 to Orchard Core ([see case study](https://lombiq.com/blog/helping-the-city-of-santa-monica-with-orchard-core-consulting)).

- The new [Smithsonian Folkways Recordings website](https://folkways.si.edu/) when migrating it from Orchard 1 to Orchard Core ([see case study](https://lombiq.com/blog/smithsonian-folkways-recordings-now-upgraded-to-orchard-core)).

- The new [Lombiq website](https://lombiq.com/) when migrating it from Orchard 1 to Orchard Core ([see case study](https://lombiq.com/blog/how-we-renewed-and-migrated-lombiq-com-from-orchard-1-to-orchard-core)).

- The new client portal for [WTW](https://www.wtwco.com/) ([see case study](https://lombiq.com/blog/lombiq-s-journey-with-wtw-s-client-portal)).

Do you want to quickly try out this project and see it in action? Check it out in our [Open-Source Orchard Core Extensions](https://github.com/Lombiq/Open-Source-Orchard-Core-Extensions) full Orchard Core solution and also see our other useful Orchard Core-related open-source projects!

Also see our [Node.js Extensions](https://github.com/Lombiq/NodeJs-Extensions) project, which contains complete asset pipelines built on top of this project.

Do you want to quickly try out this project and see it in action? Check it out in our [Open-Source Orchard Core Extensions](https://github.com/Lombiq/Open-Source-Orchard-Core-Extensions) full Orchard Core solution and also see our other useful Orchard Core-related open-source projects!

## How to use

Install the [NuGet package](https://www.nuget.org/packages/Lombiq.Npm.Targets/), or if you use the project from a submodule, add the following lines to the csproj file where the _package.json_ file is. Make sure that the paths are pointing to the _Lombiq.Npm.Targets.props_ and _Lombiq.Npm.Targets.targets_ files of this project.

```xml

```

The `npm install` (or `pnpm install`, see below) command will be executed but only if the _package.json_ file exists and has been changed since the last build (i.e. you un/installed or up/downgraded packages). Note that if you update NPM then the _package.json_ and _package-lock.json_ files can change on `npm install`; currently, [there's no way to prevent this](https://github.com/npm/cli/issues/564) (`npm ci` is much slower).

An `npm run dotnet-prebuild --if-present` script will be also executed during the build process, which can be utilized to run a custom task. This will only happen if the files defined in `NpmDotnetPrebuildWatchedFiles` have changed (to achieve [incremental build](https://learn.microsoft.com/en-us/visualstudio/msbuild/how-to-build-incrementally)). By default, these files contain _package.json_, _Assets/\*\*/\*.\*_, _Scripts/\*\*/\*.\*_, and _Styles/\*\*/\*.\*_. If you want to adjust this list to cover your custom folders and files, override the given MSBuild item in your project file as follows:

```xml

  

```

If you want to utilize this, then add a `dotnet-prebuild` script to the _package.json_ file as follows (`npm run build` is just an example command):

```json

{

  "private": true,

  "scripts": {

    "dotnet-prebuild": "npm run build"

  }

}

```

Similarly, you can execute `npm run dotnet-postclean --if-present` via the `dotnet-postclean` script to clean up anything after an MSBuild `Clean`, for example:

```json

{

  "scripts": {

    "dotnet-postclean": "npm run clean"

  }

}

```

## Copying vendor libraries into _wwwroot_

If you intend to do something more advanced with Node.js dependencies, you may want to use our [Node.js Extensions](https://github.com/Lombiq/NodeJs-Extensions) project instead. But if you just want to fetch vendor packages from NPM and copy them into _./wwwroot/vendors_ directory, follow these steps:

1. Make sure the _package.json_ file contains the desired NPM packages in the `dependencies` or `devDependencies` section. For example:

   ```json

   {

     "private": true,

     "devDependencies": {

       "chart.js": "4.4.9",

       "chartjs-plugin-annotation": "3.1.0",

       "chartjs-plugin-datalabels": "2.2.0"

     }

   }

   ```

2. In your _.csproj_ file, find an `` and add `` items for each.

   - If the distribution files are located in a _dist_ subdirectory of the package (e.g. _./node_modules/chart.js/dist_), then you are good to go.

   - Otherwise, include a child element `some/other/path`

     ```xml

     

       dist

     

     ```

     Note that you can include multiple `` elements. In this case all of them must exist, and they will be all copied into the same output directory.

   - If you want to copy the whole package directory, include an empty `` element, otherwise you'll get a warning.

   - If you want to copy into a different directory inside _./wwwroot/vendors_, you can also add a `path/relative/to/vendors` child element.

3. After build, it will copy the contents of the selected subdirectory into _./wwwroot/vendors/{package_name}_ directory. For example the contents of _./node_modules/chart.js/dist_ are copied into _./wwwroot/vendors/chart.js_.

> [!WARNING]

> The `` elements are interpreted by a separate task that only looks at the current project's file (usually _NameOfProject.csproj_). It does not evaluate MSBuild properties or other substitutions. It does not look for `` elements in other files included via `` or in files like _Directory.Build.props_.

## Using PNPM

[PNPM](https://pnpm.io/) is a faster and more efficient package manager. If it's available in the current shell, NPM Targets will use `pnpm` instead of `npm` to restore packages.

For details on setting up PNPM, refer to [these prerequisites](https://github.com/Lombiq/NodeJs-Extensions#prerequisites).

If you want to keep compatibility with NPM, then you have to maintain both _pnpm-lock.yaml_ and _package-lock.json_ files, since PNPM uses its own package lock file.

## Contributing and support

Bug reports, feature requests, comments, questions, code contributions and love letters are warmly welcome. You can send them to us via GitHub issues and pull requests. Please adhere to our [open-source guidelines](https://lombiq.com/open-source-guidelines) while doing so.

This project is developed by [Lombiq Technologies](https://lombiq.com/). Commercial-grade support is available through Lombiq.