如何使用Electron.NET Package ASP.NET核心单页应用程序

fnatzsnv  于 2023-03-06  发布在  Electron
关注(0)|答案(1)|浏览(335)

我使用ASP.NET核心和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>

现在我想用www.example.com Package 这个项目Electron.net,以便作为一个本地桌面应用程序运行它。我已经安装了nuget包,并按照Electron.net github上的设置说明运行。我通过electionize start运行我的应用程序,一切看起来都构建正确,它打开了一个空白的电子窗口。我的electronize输出的最后几行看起来像这样。

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!

当我查看电子版的开发人员工具时,我看到一个对http://localhost:8001/的请求,带有404错误。
我从这里到哪里去正确配置电子托管我的项目?

fcy6dtqo

fcy6dtqo1#

请不要使用来自博客的回购,有一些问题与npm包。

一开始,我想用那个博客里的repo,但是总是失败,也许我用的是npm和node的高版本,总是失败,然后我用.net5创建了一个新的项目,它成功了。
您也可以尝试添加任何类型的web项目然后使用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.

我也按照文件,在项目中添加下面的代码。它的工作很好。

相关问题