从零开始：Electron与Nestjs结合打造跨平台桌面应用教程

最近在学习Electron和Nestjs，想开发一个跨平台的桌面应用，但不太清楚如何将两者结合起来。有没有详细的教程或步骤可以参考？比如：

  1. Electron和Nestjs应该如何分工协作？
  2. 前端和后端的通信机制怎么搭建？
  3. 如何打包发布最终的跨平台应用？
  4. 开发过程中有哪些常见坑需要避免？ 希望能得到一些实践经验的分享，谢谢！
3 回复

要结合 Electron 和 NestJS 开发跨平台桌面应用，首先需要安装 Node.js 和 npm。先用 NestJS 创建后端服务，运行 npm i -g @nestjs/cli 后，执行 nest new backend 创建项目，配置 REST API。

接着安装 Electron，全局安装 npm install -g electron，然后在项目根目录初始化 npm init。创建 main.js 作为主进程文件，引入 Electron 构建窗口。前端用 Angular 或 Vue 快速搭建，通过 HTTP 与 NestJS 通信。

确保 NestJS 启动时监听特定端口，比如 3000，Electron 中加载 http://localhost:3000。打包时用 electron-builder，配置 package.json 的 build 节点。记得处理好跨域问题，可在 NestJS 中启用 CORS。整个流程需多次调试，注意前后端分离的架构设计和资源路径管理。


  1. 准备工作：安装Node.js和npm，初始化项目npm init -y。

  2. 后端搭建：用Nestjs创建API服务，npm i -g @nestjs/cli，运行nest new backend。定义数据模型和服务模块，例如用户管理。

  3. 前端搭建：安装Electron，npm i electron --save-dev，配置package.json脚本如"start": "electron ."。

  4. 集成通信：使用ipcMain和ipcRenderer实现Electron与Nestjs的通信，比如调用后端API获取数据。

  5. 构建界面：使用Electron的BrowserWindow加载React或Vue页面，确保前后端分离。

  6. 打包发布：使用electron-builder打包成可执行文件，配置package.json中的build字段。

  7. 测试部署：在Windows、Mac、Linux上测试功能完整性，修正跨平台兼容性问题。

  8. 优化体验：优化性能，减少资源占用，提升用户体验。完成一个基础的跨平台桌面应用开发。

Electron与Nestjs结合打造跨平台桌面应用教程

基础准备

  1. 安装Node.js (建议16.x或更高版本)
  2. 创建项目文件夹并初始化:
mkdir electron-nest-app
cd electron-nest-app
npm init -y

设置NestJS后端

  1. 安装NestJS CLI并创建项目:
npm i -g @nestjs/cli
nest new server
  1. 进入server目录并安装依赖:
cd server
npm install
  1. 创建一个简单的API控制器:
// server/src/app.controller.ts
import { Controller, Get } from '@nestjs/common';

@Controller()
export class AppController {
  @Get('hello')
  getHello(): string {
    return 'Hello from NestJS!';
  }
}

设置Electron前端

  1. 回到项目根目录，安装Electron:
cd ..
npm install electron --save-dev
  1. 创建Electron主进程文件:
// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  
  // 加载NestJS服务
  mainWindow.loadURL('http://localhost:3000');
  
  // 或者开发时使用Vue/React等前端框架
  // mainWindow.loadURL('http://localhost:8080');
});

整合运行

  1. 修改package.json添加启动脚本:
{
  "scripts": {
    "start:server": "cd server && npm run start:dev",
    "start:electron": "electron .",
    "start": "concurrently \"npm run start:server\" \"npm run start:electron\""
  }
}
  1. 安装并发运行工具:
npm install concurrently --save-dev
  1. 启动应用:
npm start

进阶建议

  • 使用IPC(进程间通信)在Electron和NestJS之间传递数据
  • 考虑打包工具如electron-builder
  • 添加前端框架(React/Vue)增强用户体验
  • 实现热重载提升开发体验

这样你就有了一个基本的Electron+NestJS跨平台桌面应用框架！

回到顶部