如何使用 Electron.NET 包装 ASP.NET Core 单页应用程序

Question

我按照这篇博文使用 ASP.NET Core 和 react/typescript 创建了一个 SPA：https://www.nolanbradshaw.ca/net-react-typescript-template

在调试项目时，我在 launchSettings.json 中使用以下内容

"MySPA": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5181",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    }

我的 .csproj 文件中的 SpaProxy 设置如下所示...

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>client-app\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <SpaProxyServerUrl>http://localhost:3000</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="ElectronNET.API" Version="13.5.1" />
    <PackageReference Include="Microsoft.AspNet.SignalR.Core" Version="2.4.3" />
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.10" />
    <PackageReference Include="Serilog.Extensions.Logging" Version="3.1.0" />
    <PackageReference Include="Serilog.Sinks.File" Version="5.0.0" />
  </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>
  <ItemGroup>
    <None Remove="client-app\src\components\TestPage.tsx" />
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Include="..\Services\Services.csproj" />
  </ItemGroup>
  <ItemGroup>
    <TypeScriptCompile Include="client-app\src\components\TestPage.tsx" />
  </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-&gt;'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
  <ItemGroup>
    <Content Update="electron.manifest.json">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
  </ItemGroup>
</Project>

我现在想用 Electron.net 包装这个项目，以便将它作为本地桌面应用程序运行。我已经安装了 nuget 包并按照 Electron.net github 上的设置说明进行操作。我通过

electionize start

运行我的应用程序，一切看起来都正确构建，它打开了一个空白的电子窗口。我的电子化输出的最后几行看起来像这样。

ElectronHostHook handling started...
Invoke electron.cmd - in dir: C:\s-lab\repos\LxTraderV3\LxTraderV3\LxTraderV3\obj\Host\node_modules\.bin
electron.cmd "..\..\main.js"

Electron Socket IO Port: 8000
Electron Socket started on port 8000 at 127.0.0.1
ASP.NET Core Port: 8001
stdout: Use Electron Port: 8000

stdout: ASP.NET Core host has fully started.

ASP.NET Core Application connected... global.electronsocket iBNLmdfbkcPJRNlyAAAA 2023-03-01T21:45:18.720Z
stdout: BridgeConnector connected!

当我查看 electron 中的开发人员工具时，我看到对 http://localhost:8001/ 的请求有 404 错误。

从这里我应该从哪里正确配置 electron 来托管我的项目？

Answer 1

请不要使用博客中的 repo，npm 包有一些问题。

起初，我想使用那个博客中的 repo，但在我这边总是失败，也许我使用的是高版本的 npm 和 node。它总是失败，然后我用 .net5 创建了一个新项目。它有效。

你也可以尝试添加任何一种web项目然后使用

electron

，如果你已经完成你的项目，你需要确保你的项目可以正常运行，然后再使用electron。

我的测试结果

我这边的输出日志和你不一样。我发现你在下面不见了。

info
stdout: : Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:8003
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info
stdout: : Microsoft.Hosting.Lifetime[0]
      Hosting environment: Production
info: Microsoft.Hosting.Lifetime[0]
      Content root path: F:\AspNetCore\ReactTypeScript.NET-master\Project2\obj\Host\bin

---

我的日志

ElectronHostHook handling started...
Invoke electron.cmd - in dir: F:\AspNetCore\ReactTypeScript.NET-master\Project2\obj\Host\node_modules\.bin
electron.cmd "..\..\main.js"

Electron Socket IO Port: 8000
Electron Socket started on port 8000 at 127.0.0.1
ASP.NET Core Port: 8003
stdout: Use Electron Port: 8000

stdout: ASP.NET Core host has fully started.
info
stdout: : Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:8003
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info
stdout: : Microsoft.Hosting.Lifetime[0]
      Hosting environment: Production
info: Microsoft.Hosting.Lifetime[0]
      Content root path: F:\AspNetCore\ReactTypeScript.NET-master\Project2\obj\Host\bin

ASP.NET Core Application connected... global.electronsocket Jk0Cek48X1fg_pmtAAAA 2023-03-03T08:16:13.333Z
stdout: BridgeConnector connected!

stdout: warn: Microsoft.AspNetCore.HttpsPolicy.HttpsRedirectionMiddleware[3]
      Failed to determine the https port for redirect.

我也跟着文档，在项目中添加下面的代码。它工作正常。