PlayNicely.NpmNpx 1.3.4-beta-322

This is a prerelease version of PlayNicely.NpmNpx.
dotnet add package PlayNicely.NpmNpx --version 1.3.4-beta-322                
NuGet\Install-Package PlayNicely.NpmNpx -Version 1.3.4-beta-322                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="PlayNicely.NpmNpx" Version="1.3.4-beta-322">
  <PrivateAssets>all</PrivateAssets>
  <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
</PackageReference>                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add PlayNicely.NpmNpx --version 1.3.4-beta-322                
#r "nuget: PlayNicely.NpmNpx, 1.3.4-beta-322"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install PlayNicely.NpmNpx as a Cake Addin
#addin nuget:?package=PlayNicely.NpmNpx&version=1.3.4-beta-322&prerelease

// Install PlayNicely.NpmNpx as a Cake Tool
#tool nuget:?package=PlayNicely.NpmNpx&version=1.3.4-beta-322&prerelease                

Play Nicely - npm & npx

NuGet package to inject npm and npx tooling into your project.

The purpose of this project is to support npm packages that handle build time tasks in web/js projects, such as the awesome tailwindcss, Sass, or TypeScript, without having to install these modules globally (although Node.js does need to be installed).

This project on its own doesn't do anything particularly interesting. The easiest way to utilize it is to use one of its dependent projects, e.g. PlayNicely.Sass. But if you need to add a npm package for something else, you can, and it allows you to execute it during the dotnet build process.

Getting Started

It is recommended that you initialize your Node project and install any dependencies, then install this package.

npm init
npm install --save-dev my-cool-dev-dependency

Once your npm dependencies are installed, install this package to your .NET project.

Install-Package PlayNicely.Sass

ℹ️ Should work by default
We recommend the above process, however, if you just install this package in your .NET project, the default build process will check to see if package.json exists in the root directory. If the file does not exist, the build will run npm init ‑y to create it.

The package.json file is included in the build as a NpmProject MSBuild item and is used to decide what, if any npm commands need to be ran. This includes npm init ‑y and npm install.

An example with tailwindcss

Let's say you want to use tailwindcss in you web project.

From a shell:

  1. Initialize the node project.

    npm init
    
  2. Install tailwindcss as a dev dependency, and create a base tailwind.config.js.

    npm install -D tailwindcss
    npx tailwindcss init
    
  3. Install this package.

    Install-Package PlayNicely.NpmNpx
    
  4. Configure your tailwind environment.

  5. Add a tailwindcss build Target to your .NET project file. Notice that the target (below) depends on npm‑install and runs after target BeforeBuild. It depends on any npm packages being installed and any BeforeBuild processing, before generating the tailwind site.css file.

    <Target Name="tailwind-build"
            DependsOnTargets="npm-install"
            AfterTargets="BeforeBuild">
      <Exec Command="npx tailwind build -i ./src/site.css -o ./wwwroot/css/site.css" />
      <ItemGroup>
    
        <Content Include="wwwroot/css/site.css" Exclude="@(Content)" />
      </ItemGroup>
    </Target>
    

Configuration

The package includes two MSBuild project files, that are imported into your project:

  • PlayNicely.NpmNpx.props
    Contains the most common default properties, and items, for node projects.
    • NpmRootDirectory
      A property which is the root of the node project, defaults to the project that is installing this dependency.
    • NpmProject
      A default item, this is the package.json file in the root of the dependent project.
  • PlayNicely.NpmNpx.targets
    A basic set of MSBuild Target definitions:
    • npm‑version and npx‑version
      To check that the npm and npx executables, respectively, are installed and fail the build if they aren't.
    • npm‑init
      Runs npm init ‑y for any NpmProject items that have not been initialized with a package.json.
    • npm‑install
      Runs npm install for any NpmProject items, to ensure node dependencies have been installed locally.

Other properties that effect build:

  • NpxRequired
    Set this to false if your build does not require the npx tool. If this property is false, then the build will succeed, even if npx is not detected. This property is not set by default, which is equivalent to true.
  • NpmAutoInit
    Set this to false if you want to manually initialize your node project with npm init. This property is not set by default, which is equivalent to true.

To change these defaults, simply add them to a PropertyGroup in your project file.

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    
    <NpxRequired>false</NpxRequired>
    
    <NpmAutoInit>false</NpmAutoInit>
  </PropertyGroup>

  
</Project>

Multiple Node Projects

The most common scenario is for a web project to contain a single node project, a package.json file. And for that node project to be at the root of the MSBuild project. You can have multiple node projects, by defining them in your MSBuild project, but each package.json needs to be in a separate directory.

<Project Sdk="Microsoft.NET.Sdk">
  

  <ItemGroup>
    <NpmProject Include="path/to/package.json" />
  </ItemGroup>

  
</Project>

npm init -y for missing package.json files

If a NpmProject is defined but the package.json does not exist, the build targets will initialize those projects, using npm init ‑y, by default. This creates an empty node project with no dependencies. This is a convience so the build succeeds by default. You will still need to add your own npm dependencies, using npm install, to do anything useful.

⚠️ Default npm init ‑y behavior
If the project directory already contains a node_modules directory, the npm init ‑y command will add all packages in the node_modules directory as dependencies in the created package.json.

It is recommended that you create your package.json files manually, using npm init, and add any dependencies using npm install.

There are no supported framework assets in this package.

Learn more about Target Frameworks and .NET Standard.

  • .NETStandard 1.0

    • No dependencies.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on PlayNicely.NpmNpx:

Package Downloads
PlayNicely.Sass

An MSBuild targets package that adds support for the sass transpiler in a .NET project.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.3.4-beta-322 80 9/28/2024
1.3.4-beta-297 78 9/21/2024
1.3.4-beta-295 74 9/21/2024
1.3.4-beta-289 106 9/14/2024
1.3.4-beta-281 73 9/1/2024
1.3.3 97 6/1/2024
1.3.3-beta-274 86 7/12/2024
1.3.3-beta-266 73 6/1/2024
1.3.2 101 6/1/2024
1.3.2-beta-262 95 6/1/2024
1.3.2-beta-260 86 6/1/2024
1.3.2-beta-253 78 6/1/2024
1.3.2-beta-249 101 5/31/2024
1.3.2-beta-239 87 5/22/2024
1.3.2-beta-233 87 5/12/2024
1.3.2-beta-213 99 5/7/2024
1.3.2-beta-207 82 4/28/2024
1.3.2-beta-200 154 4/14/2024
1.3.1 332 4/11/2024
1.3.1-beta-191 133 4/11/2024
1.3.1-beta-177 115 4/8/2024
1.3.0 938 3/12/2024
1.3.0-beta-169 122 3/22/2024
1.3.0-beta-157 104 3/13/2024
1.3.0-beta-155 110 3/12/2024
1.2.1.93-prerelease-2024011... 149 1/11/2024
1.2.1.91-prerelease-2024011... 121 1/11/2024
1.2.1 159 1/24/2024
1.2.1-prerelease-20240124-1... 99 1/24/2024
1.2.1-prerelease-20240118-1... 95 1/18/2024
1.2.0.82 106 1/10/2024
1.2.0.81-prerelease-2024011... 81 1/10/2024
1.2.0.76-prerelease-2024011... 107 1/10/2024
1.1.0.74 160 1/8/2024
1.1.0.73-prerelease-2024010... 109 1/8/2024
1.1.0.72-prerelease-2024010... 100 1/8/2024
1.0.3.70 142 1/8/2024
1.0.3.69-prerelease-2024010... 94 1/8/2024
1.0.3.68-prerelease-2024010... 122 1/8/2024
1.0.3.67-prerelease-2024010... 91 1/8/2024
1.0.3.64-prerelease-2024010... 120 1/5/2024
1.0.3.62-prerelease-2024010... 115 1/5/2024
1.0.3.61-prerelease-2024010... 141 1/5/2024
1.0.3.57-prerelease-2024010... 126 1/3/2024
1.0.3.56-prerelease-2024010... 118 1/3/2024
1.0.3.55 179 12/28/2023
1.0.3.54-prerelease-2023122... 111 12/28/2023
1.0.2.51 154 12/28/2023
1.0.2.50-prerelease-2023122... 124 12/28/2023