How to auto install npm modules when I build ASP.NET Core project

Question

I am building a project with ASP.NET Core Web API as back-end, with React SPA as front-end, the folder structure looks like this:

WebApiProject
│
├── ClientApp/
│   ├── public/
│   ├── src/
│   └── package.json
│
├── Controller/
├── Models/
├── appsettings.json
├── Program.cs
└── Startup.cs

When I add new npm modules to the React project (which will update package.json), and push to our team Git repo, other team members have to manually do the npm install in the ClientApp directory after they pull new commits, otherwise build process will fail due to missing dependencies.

For the front-end developers it's quite normal, yet for some of the developers who solely focus on the back-end development, it's quite troublesome, that they have to do some extra process to be able to build the project (they normally just ctrl + F5 and it's good to go).

---

I've tried the following:

• Add the nodejs directory to Tools -> Options -> External Web Tools , I thought this will acknowledge IDE to do the work for me, yet it seems not.
• The original .csproj file provides a method like this:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

  <!-- Include the newly-built files in the publish output -->
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

It's seems like some sort of auto script for ASP.NET project when it comes to publish, yet I don't quite know how to tweak it so that it do the work during development mode build-time.

---

Is there a way to make the process of npm install comes alone with the ASP.NET IDE build process? In other word, I'm looking for a way to make npm modules auto installed when building the ASP.NET project.

Answer 1

Your config is correct but that is only work for publish your project add this to your csproj file

 <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

This will assure your project run npm install before you start ASP.Net Core project

Answer 2

I Used this... I Just change a little bit the WorkingDirectory adding ClientApp

<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)ClientApp\node_modules') ">
        <Exec Command="node --version" ContinueOnError="true">
            <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
        </Exec>
        <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
        
        <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
        
        <Exec WorkingDirectory="$(SpaRoot)ClientApp" Command="npm install" />
    </Target>