Electron.Net + Linux + Blazor 初尝备忘录

Electron 是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序的一个框架， Electron.NET 是.net 下对 Electron 的封装实现，通过它可以比较容易地实现对 Electron 的调用，达成快速开发跨平台桌面应用程序的目标。

参考《入门干货之Electron的.NET实现-Electron.NET》可以很快搭建起一个跨平台的 Electron 桌面应用程序， Windows 下打包 win 平台的版本没有什么大问题，但是打包 linux 平台下的版本，会碰到一个 https://service.electron.build 服务异常的问题（fq也没用），结果就是 electron 需要的包文件下不回来，官方似乎懒得解决这个问题，直白地说了——既然是免费的午餐，吃不成也别抱怨——想打 Linux 的包不妨切换到 Linux 环境下好了。于是...

1.Ubuntu 18.04 下安装

参考MSDN上的一篇文档完成 nodejs 的安装，使用以下命令安装 cURL（用于在命令行中从 Internet 下载内容的工具）：

$sudo apt-get install curl

使用以下命令安装 nvm：

$curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

验证安装，请输入：

$command -v nvm

此命令应返回“nvm”，如果你收到“找不到命令”或根本没有响应，请关闭当前终端，将其重新打开，然后重试。

列出当前安装的 Node 版本（此时应为无）：

$nvm ls

安装 Node.js 的最新稳定 LTS 版本（推荐）：

$nvm install --lts

验证 Node.js 是否已安装，以及是否为当前默认版本：

$node -v

全局安装 electron

$npm install -g electron

验证 electron

$electron -v

安装打包工具，没安装这个之前, electronize build 可能会在下载文件的过程中发生 can not rename file 的错误

$npm install -g electron-builder
$npm install -g electron-packager

安装工具 .net 工具

dotnet tool install ElectronNET.CLI -g

记得设置路径

export PATH="$HOME/.dotnet/tools:$PATH"

2. 编译打包

进入工程目录

$electronize init

$electronize build /target linux /p:PublishReadyToRun=false /p:PublishSingleFile=true

第一次运行 electronize build 在打包时会检测 cache 中是否有需要的 electron 包，如果没有的话会从 github 上拉去，在国内网络环境中拉取的过程大概率会失败，所以你可以自己去下载一个包放到 ~/.cache 目录里，这个过程可能需要fq，如遇下载失败别灰心，多尝试几次……

不出错的话，可以看到打包完成的程序文件 bin\Desktop\*.AppImage，如果自己要打 rpm 包，也可以在下级目录 linux-unpacked\ 找到所有文件及依赖库。

3. WSL(CentOS7) 安装补遗

相比起在 Windows 下开发完，再扔到虚拟机或者专门的 Linux 主机上进行打包，能利用 Windows 自带的 WSL 实现 Linux 环境下的打包工作会方便很多，WSL(CentOS7)下安装过程与 Ubuntu 下大同小异。

#yum install curl

#curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

#nvm install --lts

CentOS root 账号执行 npm install 指令会报错 npm install Error: EACCES: permission denied, mkdir node_modules/gifsicle/ ，解决方法是增加命令参数

#npm install -g electron --unsafe-perm=true --allow-root

然后验证 electron -v 时可能还会遇到以下错误：

1) 运行报错找不到 libatk.1.0.so.0, /usr/lib 下即使存在这个文件也没有用, 因为 electron 依赖的是 /usr/lib64/libatk1.0.so.0，解决方法：

#yum install atk

2) 运行报错找不到 libatk-bridge-2.0.so.0

#yum install at-spi2-atk

3) 运行报错找不到 libgdk_pixbuf-2.0.so.0

#yum install gdk-pixbuf2

4) 运行报错找不到 libgtk-3.so.0

#yum install gtk3

5) 运行报错 Running as root without --no-sandbox is not supported

#electron -v --no-sandbox

4 Electron.NET + Blazor 遇到的小坑

4.1 Blazor Server 启动端口问题

electron 启动后台的 asp.net core 程序时，appsettings.json 里面配置的端口是不起作用的。看源码如果没有特殊指定，Electron 会从 8000 端口开始找第一个可用的端口给后台程序启用监听，这在 CreateWindowAsync 传 Url 的时候让我犯了难，查文档发现可以在 electron.manifest.json 中增加

"aspCoreBackendPort": 固定端口,

的方式来解决。后来发现更简单的方法是使用 ElectronNET.API.BridgeSettings.WebPort 来动态获取后台服务的端口，这在《入门干货...》那篇文章里提到过，可惜我读书不仔细，绕了圈子。

4.2 如何在 vs2019 中调试

在 vs2019 中默认的运行项目不会启动 Electron，命令行中通过 electronize start 启动的话又需要附加进程来命中断点进行调试，如何在 vs2019 中启动 Electron 的同时也能调试呢——在调试中选 Electron.NET App

4.3 Blazor Server Bootstrap 样式异常

默认的 Blazor Server 程序使用的是 BootStrap 的样式，Windows 下打包发布的 electron 程序在 Windows 下运行显示一切正常，但是到了 Ubuntu 下打包出来的程序，样式显示就异常了，最明显的是左侧的菜单列显示不出来了。我不太会搞前端，看不出个中缘由，但是发现 Electron 访问 vs2019 生成的 release\publish 下的后台程序显示是正常的，于是尝试把 linux-unpack\resources\bin 下的文件替换成 publish 下的版本，然后再运行 electron 主程序，这回显示正常了。谨慎怀疑是否 electron-builder 打包的时候漏了什么，不过 Linux 下打包使用 Ant Design Blazor 组件开发的 Blazor Server 程序显示是正常的。

4.4 electronize start 出错（2021-9-17 更新）

如果遇到这个错误，建议检查一下引用 Electron.Net项目的名字，就是 *.csproj 的 *，如果名字里面有字符点，例如 XXX.YYY，把中间的 “.” 去掉。

另外 Blazor Server 的项目最好也不要在名字中间有点，因为如果有的话，对应的 Shared/MainLayout.razor.css 有可能不能正常生成，运行起来 XXX.YYY.styles.css 这个资源找不到(404)，缺省的 BootStrap 的样式就丢了。