Generated bundle files are not included in published artifact

user_14458512 0
Viewed 560

I have an asp.net (.Net 4) program in which I recently integrated ReactJS pages. I have used Webpack for doing so.

The project has post-build events to build my JS bundles which look like :

npm install
npm run build

My webpack configuration makes it so the bundles are written in a folder called dist.

In development, everything is fine. The bundles are built correctly when I build the solution (and the project in question).

However, when I tried to publish my project in release mode using the Visual Studio Publish feature, I quicky noticed that my JS bundles were missing from my dist folder.

I then fixed the problem with some tweaks to my csproj, which are the following :

I first included the dist folder in its entirety to my project, as I only had included one file from the folder into the project :
<Content Include="dist\**">
  <Visible>false</Visible>
</Content>

I then added a Target step at the end of the csproj to include the content of the folder in the published package :
<Target Name="AfterBuild">
  <ItemGroup>
    <BundleFiles Include="dist\**" />
    <FilesForPackagingFromProject Include="%(BundleFiles.Identity)">
      <DestinationRelativePath>%(BundleFiles.Identity)</DestinationRelativePath>
    </FilesForPackagingFromProject>
  </ItemGroup>
</Target>

After these changes, I could publish my web application and the bundles would be generated (after build event) and then included into that publish folder.

So now, the problem... We use Azure DevOps pipeline to build our production releases. Even after the changes I made to the csproj, the JS bundles are NOT included in the published artifacts of the pipeline.

I can see that the post-build events run in the logs (I even tried to switch it to pre-build) and that the JS bundles are generated. However, when I unzip the project and look at the dist folder : it is empty.

The configuration of the pipeline is not something new in our workflow, it has been there for over a year and works fine for every other use case. The only problem so far is this one : the JS bundles from the 'dist' folder are not carried over to the publish.

Please note that we don't host the pipeline agent, we use a 'windows-latest' Azure agent and we build using VS 2019. My guess is that in the order of the build events, the list of files to be included in the publish artifact might be written before the JS files are generated.

Any help would be great, Thanks in advance

webpack azure-devops msbuild
1 Answers

You can try adding below property groups to your csproj file, if they were not in the csproj.

  <PropertyGroup>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
      AfterBuild;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForPackageDependsOn>
  </PropertyGroup>
  <PropertyGroup>
    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
      AfterBuild;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>

See this blog for detailed information.

If above doesnot work out. You can also add below tasks before publish build artifacts.

Extract files task to unzip the artifacts package,

and add a copy file task to copy the dist folder to the artifacts,

then add an archive files task to zip the artifacts again.

user_118821860
Related