ASP.NET Core 3.1 integration with npm

Question

I'm working on an ASP.NET Core 3.1 application and decided to use npm to manage front end libraries, right now they should be few, but that might change in the future.

I have seen several similar questions, but they all seem to be a little outdated:

How to use NPM and install packages inside Visual Studio 2017?

How to use npm with ASP.NET Core

I intend to use npm to install the required libraries on the CI environment, I remember being able to integrate npm commands into the dotnet ones and would like to know if it is possible/recommendable.

What is the recommended approach to use npm in this newer version of ASP.NET Core?

Answer 1

I suggest using Yarn for two reasons:

• For your use case, it is a drop in replacement for npm.
• An existing Nuget package, Yarn.MSBuild, integrates Yarn into MSBuild.

Yarn.MSBuild allows you to specify Yarn commands in your .csproj. These commands run when you build your project. For example, to install front end packages on build:

1. Add a reference to Yarn.MSBuild in your .csproj:

   <ItemGroup>
     <PackageReference Include="Yarn.MSBuild" Version="*" />
   </ItemGroup>
   

2. Add a YarnBuildCommand property:

   <PropertyGroup>
     <YarnBuildCommand Condition="'$(Configuration)' == 'Release'">install</YarnBuildCommand>
   </PropertyGroup>
   

In the above example, yarn install runs when you build your project in release configuration. You asked specifically about building in CI using dotnet - with this setup, when you run dotnet build -c Release in CI, your front end packages are installed.

Note that by default, the command executes in your .csproj's directory. You can change this by adding a YarnWorkingDir property:

<PropertyGroup>
  <YarnWorkingDir>$(MSBuildProjectDirectory)/wwwroot/</YarnWorkingDir>
</PropertyGroup>