c# - Hur distribuerar man React SPA-mallen i Visual Studio 17.8 Preview 1?

Igår släppte Visual Studio-teamet två mycket välkomna förbättringar i 17.8 Preview 1:

React- och ASP.NET Core Visual Studio-mallen stöder TypeScript.
React- och ASP.NET Core Visual Studio-mallen stöder Vite.

Jag kunde dock inte få den nya mallen att distribueras med hjälp av alternativet för självständig distribution (NET-version 8.0.0 stöds ännu inte av Azure Web App Service).

Jag provade alternativet Bygg | Publicera… i Visual Studio… och (efter att ha tillhandahållit nya resurser i Azure) fick jag ett 404-fel när jag startade webbplatsen.

Jag har skrivit ett mycket detaljerat inlägg om att distribuera den befintliga dot net react-versionen av denna mall för applikationer som utför företagsautentisering. Jag vill uppdatera detta inlägg med den nyligen släppta förhandsgranskningsmallen när jag har distribuerat och framgångsrikt kört den i Azure.

Jag misstänker att problemet är att de nya förhandsgranskningsmallarna .CSPROJ-filer är mycket mindre detaljerade än den tidigare mallens .CSPROJ-fil. Här är den tidigare .CSPROJ som har det viktigaste utseendet PublishRunWebpack-målet:

<Project Sdk="Microsoft.NET.Sdk.Web"> 
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot><DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules</DefaultItemExcludes>
<SpaProxyServerUrl>https://localhost:3000</SpaProxyServerUrl>
<SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.8" />
<PackageReference Include="Microsoft.Identity.Web" Version="2.13.2" />
<PackageReference Include="Microsoft.Identity.Web.MicrosoftGraph" Version="2.13.2" />
<PackageReference Include="Microsoft.Identity.Web.UI" Version="2.13.2" />
</ItemGroup>

<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None 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 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" />

<!-- Include the newly-built files in the publish output -->
<ItemGroup>
  <DistFiles Include="$(SpaRoot)build\**" />
  <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
    <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
  <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
  </ResolvedFileToPublish>
</ItemGroup>
</Target>
</Project>

Och här är .CSPROJ-filerna i den nya förhandsgranskningsmallarna:

KLIENT

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.105-alpha">
<PropertyGroup>
<StartupCommand>npm run dev</StartupCommand>
<JavaScriptTestRoot>src\</JavaScriptTestRoot>
<JavaScriptTestFramework>Jest</JavaScriptTestFramework>
<!-- Allows the build (or compile) script located on package.json to run on Build -->
<ShouldRunBuildScript>false</ShouldRunBuildScript>
<!-- Command to create an optimized build of the project that's ready for publishing -->
<ProductionBuildCommand>npm run build</ProductionBuildCommand>
<!-- Folder where production build objects will be placed --><BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
  </PropertyGroup>
</Project>

SERVER

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

<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<InvariantGlobalization>true</InvariantGlobalization>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.0.0-preview.7.23375.9" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\vitetypescriptreact.client\vitetypescriptreact.client.esproj">
  <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
</ProjectReference>
</ItemGroup>

</Project>

Jag har skickat in återkopplingen via Visual Studio och lämnat en kommentar på meddelandeinlägget: https://devblogs.microsoft.com/visualstudio/visual-studio-2022-17-8-preview-1-has-arrived/#comment-29228

Jag kommer att posta vad jag lär mig. Är svaret uppenbart för någon?

Svar #1

Förhandsgranskningsmallen har två problem:

Microsoft.AspNetCore.SpaProxy (8.0.0-preview.7.23375.9) kan inte laddas, har tagits bort från mallen, och därför kräver appar som byggts med mallen manuella försök vid start
.CSPROJ-filerna saknar element som behövs för distribution på Azure (rapporterat till Microsoft och "under utredning").

Vi skulle kunna kringgå problemet genom att:

nedgradering till den senaste stabila SPA-proxyn
uppdatera mallens HTML i enlighet med detta
lägger till nödvändig distributionslogik i CSPROJ-filer

Men jag tänker att jag kommer att hålla mig till den släppta mallen och uppgradera den till Vite och TypeScript själv. Här är min detaljerade genomgång.