Angular - Multiple environment with asp.net core spa

Question

I'm trying to build a Angular SPA application with dotnet core that tries to build angular with specific npm command based on the buid definition name.

The condition have the 2 last target in my csproj.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>

    <!-- Set this to true if you enable server-side prerendering -->
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.1"/>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.1.1" />
    <PackageReference Include="Gardendynamics.Commons" Version="1.0.0-ci-88" />
    <PackageReference Include="Gardendynamics.Tiers" Version="1.0.0-ci-50" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\PicaplantBack.Database\PicaplantBack.Database.csproj" IncludeAssets="All" />
  </ItemGroup>
  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <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>

  <Target Condition=" '$(Build_DefinitionName)' == 'BackOfficePreProd' " Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:preprod" />
    <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\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

  <Target Condition=" '$(Build_DefinitionName)' == 'BackOfficeProd' " Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <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\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>

In my VSTS build, the build and publish command are the default ones.

But in all my builds, or the production as taken, or the build failed because the condition are incorrect.

Need some help. Thanks

Seems the issue is more related to code area, not related to VSTS side, since the build failed caused by incorrect condition, suggest you to remove the vsts tag. — PatrickLu-MSFT
– PatrickLu-MSFT, Commented Aug 6, 2018 at 8:44

Community · Accepted Answer · 2023-07-21 14:33:16Z

11

I had a similar problem which I needed provide few different builds. What I found is the project accepts just one step of compute files to publish. So, since your code inside the steps are similar and the difference is just one line - which indicates the build - you can use one step and bring the conditions to inside of it.

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:prod" Condition=" '$(Build_DefinitionName)' == 'BackOfficeProd'"/>   
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:preprod" Condition="'$(Build_DefinitionName)' == 'BackOfficePreProd'"/>
  <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\**" />
    <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

If you have problem with the condition variable, you can use the configuration manager to set some configuration variables.

Adding variables configuration manager

And you will be able to use these variables to build dotnet publish -c|--Configuration Dev

edited Jul 21, 2023 at 14:33

CommunityBot

11 silver badge

answered Dec 20, 2018 at 17:42

Matheus Ferreira

3876 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bitshift Over a year ago

thank you, this was something ive been spending all day on trying to figure out. I knew it had to be somewhere other than the config files.

bitshift Over a year ago

This works as expected when publishing directly from within Visual Studio, but when running dotnet publish from the cli, it seems like its not taking the configuration value. For example, I have a build definition called 'Test' and a command that checks for that condition, but the result is that just ng build is run. Whereas my command is <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --prod false --configuration=dev" Condition=" '$(Configuration)' == 'Test' " />

Matheus Ferreira Over a year ago

Are you passing the test configuration variable in the dotnet publish command?

Collectives™ on Stack Overflow

Angular - Multiple environment with asp.net core spa

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related