Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to modify csproj PublishRunWebpack to include static files from external directory

I've started with ASP.NET Core Web Application -> Angular SPA, but I have moved the angular app to separate repository, outside the csproj.

So my folder structure looks like this:

frontend
  dist

backend
  wwwroot
  backend.csproj

Now I want to modify the csproj so that the publish copies frontend/dist/**/*.* to $(outputDirecory)/ClientApp/dist/**/*.*

How should I modify the PublishRunWebpack target to copy those files:

  <PropertyGroup>
    <SpaRoot>../Frontend</SpaRoot>
  </PropertyGroup>
  
  <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 -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <!-- Include the newly-built files in the publish output -->
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">


        <!-- THIS NEEDS TO BE CHANGED (I guess) -->
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
like image 929
Liero Avatar asked Sep 21 '25 10:09

Liero


1 Answers

I had same problem and after few hours I found solution for it. I guess that this is too late for you, but someone else may find it helpful. As you said problem was with RelativePath. Default value "%(DistFiles.Identity)" use full filename and just append it to root publishing folder. Solution is to construct you own relative path as I did in code below.

<Target Name="PublishRunWebpack"
          BeforeTargets="ComputeFilesToPublish">
    <!--User app-->
    <Exec WorkingDirectory="$(SpaRoot)"
          Command="npm install"
          Condition="  !Exists('$(SpaRoot)node_modules') " />
    <Exec WorkingDirectory="$(SpaRoot)"
          Command="npm run build -- --prod" />

    <ItemGroup>
      <ClientDistFiles Include="$(SpaRoot)dist/**/*.*"/>
      <ResolvedFileToPublish Include="@(ClientDistFiles->'%(FullPath)')"
                             Exclude="@(ResolvedFileToPublish)">
        <RelativePath>ClientApp\app\dist\%(RecursiveDir)%(Filename)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
</Target>
like image 83
Darko Avatar answered Sep 23 '25 04:09

Darko