npm task not creating node_modules folder in Azure pipeline

Question

This is not a node project but rather an MVC Web Application. Objective is to bundle a Quill.js library via npm steps in the Azure pipeline.

Problem: node_modules folder with needed code and dependencies is not getting generated in the pipeline.

package.json is configured such that deploying the solution locally in a fresh location with only an "npm install" will recreate node_modules folder with all the needed files and dependencies so that everything works beautifully.

Having trouble duplicating this process via Azure Pipeline tasks, however. node_modules folder with the needed goodies is not getting created. Have done some experimentation but here’s the sequence that makes the most sense to me:

Use NuGet NuGet Restore
VsTest – testAssemblies
Use Node 8.x
npm install (task is set to run in same project folder where package.json lives)
Build solution
Several other tasks…

package.json looks like this...

{
  ...
     ,
  "dependencies": {
    "quill": "^1.3.7"
  }
}

But node_modules is not getting created as it does in local.

Thanks for any suggestions.

Answer 1

Found the solution. Had incorrectly identified the problem. It turned out that the node_modules folder was in fact being loaded by npm on the build machine but the build solution wasn't picking up the folder or its contents to be included in the artifact.

Answer found on this blog post:

https://blogs.perficient.com/2016/08/11/how-to-add-gulp-output-or-bowernpm-packages-to-webdeploy-package/

Solution was to manually edit the project file to add a custom build target, adding the below to the csproj file for the project containing the package.json.

  <Target Name="AddNpmOutput">
    <ItemGroup>
      <_CustomFiles Include="node_modules\**\*" />
      <FilesForPackagingFromProject Include="%(_CustomFiles.Identity)">
        <DestinationRelativePath>node_modules\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
      </FilesForPackagingFromProject>
    </ItemGroup>
  </Target>
  <PropertyGroup>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
      AddNpmOutput;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForPackageDependsOn>
    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
      AddNpmOutput;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>