Publish Blazor WASM application to Azure App service fails

[sam-wheat]

Same issue as here: https://github.com/dotnet/aspnetcore/issues/36641

error NETSDK1045: The current .NET SDK does not support targeting .NET 6.0. Either target .NET 5.0 or lower, or use a version of the .NET SDK that supports .NET 6.0.

https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-blazor

https://blazorhelpwebsite.com/ViewBlogPost/10

https://docs.microsoft.com/en-us/dotnet/core/tools/sdk-errors/netsdk1045

https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0

https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#standalone-deployment

With regard to the last link above, how is it possible to install the URL Rewrite module to Azure?

Is there a link to a document that provides an example .csproj and yml pipleline for deploying a Blazor app to an Azure web service? Please provide the url as I am unable to find any such documentation. Note I am deploying to a Virtual Application of an Azure App Service.

Pipeline:

# ASP.NET Core (.NET Framework)
# Build and test ASP.NET Core projects targeting the full .NET Framework.
# Add steps that publish symbols, save build artifacts, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/dotnet-core

trigger:
- release/*

pool:
  vmImage: 'windows-latest'

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

steps:

- task: UseDotNet@2             // I have tried removing this                                           
  displayName: 'Use dotnet 6'
  inputs:
    packageType: 'sdk'
    version: '6.x'

- task: DotNetCoreCLI@2
  displayName: 'DotNet Restore NuGet packages'
  inputs:
    command: 'restore'
    feedsToUse: 'select'
    vstsFeed: 'MyFeed'
    includeNuGetOrg: true

- script: dotnet build --configuration $(buildConfiguration)
  displayName: 'dotnet build $(buildConfiguration)'

- task: DotNetCoreCLI@2
  displayName: 'Dotnet publish'
  inputs:
    command: publish
    publishWebProjects: True
    arguments: '--configuration $(BuildConfiguration) --output $(Build.ArtifactStagingDirectory) --self-contained'
    zipAfterPublish: True

- task: AzureRmWebAppDeployment@4
  displayName: 'AzureRmWebAppDeployment@4'
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'My'
    appType: webApp
    WebAppName: 'MyWeb'
    VirtualApplication: '/blazor'
    packageforLinux: '$(Build.ArtifactStagingDirectory)/*.zip'

.csproj

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

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
      <ImplicitUsings>enable</ImplicitUsings>
      <AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>
      <GenerateAppxPackageOnBuild>enable</GenerateAppxPackageOnBuild>
      <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
      <RunAOTCompilation>true</RunAOTCompilation>
  </PropertyGroup>

  <ItemGroup>
    //...
  </ItemGroup>

</Project>

dotnet:

dotnet --info
.NET SDK (reflecting any global.json):
 Version:   6.0.101
 Commit:    ef49f6213a

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19044
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.101\

Host (useful for support):
  Version: 6.0.1
  Commit:  3a25a7f1cc

Edit:

I added the following to the pipeline:

- script: dotnet workload install wasm-tools
  displayName: 'Install wasm-tools workload'

Removed the following from .csproj

<GenerateAppxPackageOnBuild>enable</GenerateAppxPackageOnBuild>
<RunAOTCompilation>true</RunAOTCompilation>
<RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
<UseBlazorWebAssembly>true</UseBlazorWebAssembly>

Project builds and deploys however errors on page load:

Uncaught SyntaxError: Unexpected token '<'

[javiercn]

@sam-wheat thanks for contacting us.

It seems from what I can tell that your server is not sending the right content back to the client. I would suggest you open the network tab and load the page to see the responses the server is sending for the blazor assets. In your specific case, it usually means that blazor.boot.json is not being sent by the server and some other content is being provided instead. I would start by checking that first.

[ghost]

Hi @sam-wheat. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[sam-wheat]

Thank you @javiercn.

blazor.boot.json is not sent but it is not requested either. blazor.webassembly.js is requested and sent.

[javiercn]

@sam-wheat check the files in your network tab until you find one whose contents don't match Uncaught SyntaxError: Unexpected token '<' usually means you are expecting JS or JSON and are receiving HTML.

[ghost]

Hi @sam-wheat. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[sam-wheat]

The requested file is blazor.webassebmly.js but the content of the file is that of index.html.

[mkArtakMSFT]

@sam-wheat this looks like a configuration issue on your server. We recommend posting your question to StackOverflow for a faster response.

[sam-wheat]

I am deploying to Azure. I am asking how to configure the deployment pipeline.

Is there a link to a document that provides an example .csproj and yml pipleline for deploying a Blazor app to an Azure web service?

Does this documentation exist? I think it is fair to request this.

Thanks