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 84 9/28/2024
1.3.4-beta-297 83 9/21/2024
1.3.4-beta-295 80 9/21/2024
1.3.4-beta-289 111 9/14/2024
1.3.4-beta-281 77 9/1/2024
1.3.3 103 6/1/2024
1.3.3-beta-274 90 7/12/2024
1.3.3-beta-266 77 6/1/2024
1.3.2 105 6/1/2024
1.3.2-beta-262 99 6/1/2024
1.3.2-beta-260 90 6/1/2024
1.3.2-beta-253 84 6/1/2024
1.3.2-beta-249 105 5/31/2024
1.3.2-beta-239 91 5/22/2024
1.3.2-beta-233 93 5/12/2024
1.3.2-beta-213 103 5/7/2024
1.3.2-beta-207 86 4/28/2024
1.3.2-beta-200 158 4/14/2024
1.3.1 349 4/11/2024
1.3.1-beta-191 137 4/11/2024
1.3.1-beta-177 119 4/8/2024
1.3.0 942 3/12/2024
1.3.0-beta-169 126 3/22/2024
1.3.0-beta-157 108 3/13/2024
1.3.0-beta-155 114 3/12/2024
1.2.1.93-prerelease-2024011... 153 1/11/2024
1.2.1.91-prerelease-2024011... 125 1/11/2024
1.2.1 163 1/24/2024
1.2.1-prerelease-20240124-1... 105 1/24/2024
1.2.1-prerelease-20240118-1... 101 1/18/2024
1.2.0.82 110 1/10/2024
1.2.0.81-prerelease-2024011... 85 1/10/2024
1.2.0.76-prerelease-2024011... 111 1/10/2024
1.1.0.74 164 1/8/2024
1.1.0.73-prerelease-2024010... 113 1/8/2024
1.1.0.72-prerelease-2024010... 104 1/8/2024
1.0.3.70 146 1/8/2024
1.0.3.69-prerelease-2024010... 98 1/8/2024
1.0.3.68-prerelease-2024010... 126 1/8/2024
1.0.3.67-prerelease-2024010... 95 1/8/2024
1.0.3.64-prerelease-2024010... 124 1/5/2024
1.0.3.62-prerelease-2024010... 119 1/5/2024
1.0.3.61-prerelease-2024010... 145 1/5/2024
1.0.3.57-prerelease-2024010... 130 1/3/2024
1.0.3.56-prerelease-2024010... 124 1/3/2024
1.0.3.55 183 12/28/2023
1.0.3.54-prerelease-2023122... 117 12/28/2023
1.0.2.51 160 12/28/2023
1.0.2.50-prerelease-2023122... 128 12/28/2023