如何构建集成Node.js后端与React前端的Electron应用？

1. 基础依赖安装 #

在项目根目录执行以下命令，安装Electron及打包工具：

npm install electron electron-builder --save-dev

2. 配置Electron主进程 #

在项目根目录新建main.js（Electron主进程文件），核心逻辑是启动Node后端服务并加载React前端页面：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const http = require('http');
// 引入你的Node服务器入口文件（假设server根目录是./server，入口为index.js）
const server = require('./server/index.js');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 遵循Electron安全规范，保持禁用
      contextIsolation: true
    }
  });

  // 区分开发/生产环境加载前端资源
  if (process.env.NODE_ENV === 'development') {
    // 开发环境加载React dev server地址
    mainWindow.loadURL('http://localhost:3000');
    mainWindow.webContents.openDevTools();
  } else {
    // 生产环境加载React打包后的静态文件
    mainWindow.loadFile(path.join(__dirname, './client/build/index.html'));
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
    // 关闭窗口时终止服务器进程
    server.close(() => {
      app.quit();
    });
  });
}

// 启动Node服务器并创建Electron窗口
app.whenReady().then(() => {
  // 服务器监听3001端口（避免与React dev server的3000端口冲突）
  const PORT = process.env.PORT || 3001;
  http.createServer(server).listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
    createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

3. 调整React项目配置 #

• 修改client/package.json，设置homepage为相对路径，确保打包后静态资源路径正确：

  "homepage": "./"
  

• 在根目录package.json中添加脚本命令：

  "scripts": {
    "dev": "concurrently \"npm run server\" \"npm run client\" \"wait-on http://localhost:3000 && electron .\"",
    "server": "cd server && npm start",
    "client": "cd client && npm start",
    "build": "cd client && npm run build",
    "electron-build": "npm run build && electron-builder"
  }
  

  安装并行启动工具：

  npm install concurrently wait-on --save-dev
  

4. 配置Electron打包参数 #

在根目录package.json中添加electron-builder配置：

"build": {
  "appId": "com.yourcompany.yourapp",
  "productName": "YourAppName",
  "directories": {
    "output": "dist"
  },
  "files": [
    "main.js",
    "server/**/*",
    "client/build/**/*"
  ],
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": "dmg"
  },
  "linux": {
    "target": "deb"
  }
}

5. 开发与打包流程 #

• 开发模式：运行npm run dev，将同时启动Node服务器、React开发服务器和Electron窗口
• 生产打包：运行npm run electron-build，打包后的应用文件会生成在dist目录下

关键注意事项 #

• 确保Node服务器的API路由与React前端的请求地址匹配，生产环境下前端可直接请求http://localhost:3001（Electron窗口与本地服务器同域）
• 开发环境中可保留React dev server的代理配置，用于转发API请求到Node服务器
• 严格遵循Electron安全规范，禁用nodeIntegration以避免安全风险

内容的提问来源于stack exchange，提问作者richardb