2

When first opening the application or after doing a hard reload the isolated CSS does not load. The same is if you open up the application on mobile. In addition, the promps to download the PWA doesn't show.

What I have is a Blazor WebAssembly PWA. The solution has two projects 'server' and 'client'.
The server project contains the start up, caching etc.
The client contains the frontend.

The solution is hosted in an Azure App Service (Deployment Slot).

If deploying manually to the slot everything is fine. (Download the publish profile from Azure AppService and publish server project)

Now to the problem:
I set up two pipelines, a build pipeline and a release pipeline.

The build pipeline:

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:
- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'

- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(build.artifactStagingDirectory)"'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

- task: VSTest@2
  inputs:
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

The release pipline (Has some CI/CD settings)

Due to building a solution with multiple project I get multiple Zip-files in my drop artifact. The server one is the one I pick up and deploy to the same AppService.

The pipelines work. The problem arises first when the application is opened. If I publish manually everything looks fine and I get the prompt to download the app. However, if I use the pipeline neither the correct CSS is loaded (at least not the isolated) or the prompt to download the PWA is shown.

Client csproj

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

    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
        <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
    </PropertyGroup>

    <!--Standard vs studio warnings to ignore +
  https://learn.microsoft.com/en-us/dotnet/csharp/misc/cs0649, disable warnings for variables that are never assigned (values can be changed by dubbel binding) -->
    <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
        <NoWarn>1701;1702;0649</NoWarn>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="LibSassBuilder" Version="1.4.0" />
        <PackageReference Include="MatBlazor" Version="2.8.0" />
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
        <PackageReference Include="Microsoft.Extensions.Http" Version="5.0.0" />
        <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
    </ItemGroup>

    <ItemGroup>
        <ProjectReference Include="..\..\DeviationModels\DeviationModels.csproj" />
        <ProjectReference Include="..\..\DriverModels\DriverModels.csproj" />
        <ProjectReference Include="..\..\SafetyModels\SafetyModels.csproj" />
        <ProjectReference Include="..\Shared\BlazorDriverApp.Shared.csproj" />
    </ItemGroup>

    <ItemGroup>
        <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
    </ItemGroup>

    <ItemGroup>
        <Content Update="wwwroot\css\general.scss">
            <CopyToOutputDirectory>Never</CopyToOutputDirectory>
        </Content>
    </ItemGroup>


    <Target Name="AfterBuild">
        <ItemGroup>
            <Content Include="**\*.js" />
            <Content Include="**\*.css" />
        </ItemGroup>
    </Target>

</Project>

Server csproj

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

    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="5.0.0" />
    </ItemGroup>

    <ItemGroup>
        <ProjectReference Include="..\Client\BlazorDriverApp.Client.csproj" />
        <ProjectReference Include="..\Shared\BlazorDriverApp.Shared.csproj" />
    </ItemGroup>

    <ItemGroup>
        <Watch Include="..\**\*.scss" />
    </ItemGroup>

    <Target Name="AfterBuild">
        <ItemGroup>
            <Content Include="..\**\*.js" />
            <Content Include="..\**\*.css" />
        </ItemGroup>
    </Target>

</Project>
Cedervall
  • 1,309
  • 2
  • 13
  • 20
  • Could you have a try targeting only the server project to build in VSbuild task instead of the entire solution? `solution: 'path\to\server.csproj'` – Levi Lu-MSFT Jan 19 '21 at 09:30
  • This change creates another problem. Now during the build process I get: ```Error MSB4018: The "GenerateServiceWorkerAssetsManifest" task failed unexpectedly System.IO.DirectoryNotFoundException: Could not find a part of the path 'D:\a\1\s\App\Client\obj\Release\net5.0\service-worker-assets.js'. ``` – Cedervall Jan 21 '21 at 09:07
  • Could you check if you include the .js file in the build target in .csproj file? See [this thread](https://stackoverflow.com/questions/25787893/msbuild-output-missing-javascript-files-compiled-by-typescript). – Levi Lu-MSFT Jan 21 '21 at 09:33
  • Even after this change, the problem is still there. Updating the post with my csproj files – Cedervall Jan 21 '21 at 14:41
  • Seems like the functionality is intact, I do get the download prompt. What is missing is seems to be this file: ```BlazorDriverApp.Client.styles.css```. Compared what differed between the one published in VS and the one through the pipeline. This is when i build the complete solution and only publish the server zip. – Cedervall Jan 21 '21 at 14:52

0 Answers0