How to copy webpack builds when publishing using .NET Framework

Question

I have an older project that uses ASP.NET MVC/WebAPI, runs on .NET Framework, and gets published to an Azure Cloud Service. I'm trying to migrate to React and would like to avoid adding the webpack build as a file on the .csproj. I have managed to get build steps that run npm run build to generate the output, but the built files do not get added to the published package when I try to publish.

In a .NET 5 application when you use the React/SPA template the .csproj file has something like the following:

    <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\**" />
            <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
                <RelativePath>%(DistFiles.Identity)</RelativePath>
                <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
                <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
            </ResolvedFileToPublish>
        </ItemGroup>
    </Target>

I think I understand what this is doing, but I'm having trouble coming up with an analog that works with .NET Framework. When I run it just like this the commands don't even run. I'm guessing the ComputeFilesToPublish target does not get called on these older-style projects. I've tried running it using BeforeTargets and AfterTargets of both Build and Publish, and when I do that I can see from the logs that npm install and npm run build are being called, but the files are not copied to the publish directory (in this case csx).

What can I do in the .csproj to get my build files pulled into the publish package?

Answer 1

The issue is that the build targets for a .NET 5 Azure Web App are different from a .NET Framework Azure Cloud Service. Here was the secret sauce I needed:

  <Target Name="BuildRunWebpack" BeforeTargets="BeforeBuild">
    <Message Importance="normal" Text="Running npm install as a Pre-build step" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Message Importance="normal" Text="Running npm run build (compile webpack) as a Pre-Build step" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
  </Target>
  <Target Name="PublishRunWebpack" BeforeTargets="CollectFilesFromContent">
    <!--On publish, this will pull any files in the ClientApp\dist folder that were built by webpack. These files need to be in the published package.-->
    <Message Importance="normal" Text="Collecting webpack bundle for publish" />
    <ItemGroup>
      <Content Include="$(SpaRoot)dist\**" />
    </ItemGroup>
  </Target>