# electron-react

**Repository Path**: liqiangsheng/electron-react

## Basic Information

- **Project Name**: electron-react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-30
- **Last Updated**: 2025-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:7982](http://localhost:7982) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).


### 创建项目
```html
npx create-react-app er-app --template typescript   # 不用 TS 把 typescript 去掉
cd er-app
```
### 装 Electron（只装开发依赖）
```html
npm i -D electron electron-builder concurrently wait-on
```
### 目录结构（最终样子）
er-app/
├─ public/
│  └─ electron.js          ← 主进程文件（下一步新建）
├─ src/
├─ build/                   ← 运行 npm run build 后生成
└─ package.json

### 新建主进程文件
> public/electron.js（Create React App 会把 public 下所有文件原样复制到 build/，所以不用 Webpack）

```html
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 可选
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  // 开发时用 localhost，打包后用 file://
  const isDev = process.env.NODE_ENV === 'development';
  win.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, 'index.html')}`);
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());
```
### 让 CRA 识别 Electron 入口
在 package.json 里追加/修改 4 处：
```html
/* 1. 入口 */
"main": "build/electron.js",

/* 2.  homepage 一定要配，否则打包后路径错 */
"homepage": "./",

/* 3. 脚本 */
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "electron": "wait-on http://localhost:3000 && NODE_ENV=development electron .",
  "dev": "concurrently \"npm start\" \"npm run electron\"",
  "dist": "npm run build && electron-builder"
},

/* 4. build 配置（最小化） */
"build": {
  "appId": "com.demo.er",
  "productName": "ER-Demo",
  "directories": {
    "output": "dist"
  },
  "files": [
    "build/**/*",
    "node_modules/**/*"
  ],
  "extends": null
}
```

### npm run dev 没有起Electron 窗口

npm run dev 只是并发（concurrently）地跑了两条命令：
```html
react-scripts start        # 启 3000 端口
wait-on http://localhost:3000 && NODE_ENV=development electron .
```
Electron 窗口没弹出来，一定是 “3000 端口没就绪” 或 “electron .” 启动失败。
按下面 4 步一分钟就能定位并修好。
先看 React 到底起来了没

手动开两个终端验证：
终端 A
> npm start          # 正常应该自动打开浏览器 http://localhost:3000

终端 B
> npx wait-on http://localhost:3000 -d 5000   # 5 秒内如果没等到会报错

如果浏览器能打开 3000 但 wait-on 报错 → 端口不是 3000（比如被占用了）
如果浏览器都打不开 → React 本身起不来，看终端报错即可。

确认 3000 端口
Windows 经常因为缓存或杀毒软件把 3000 占用。
package.json 里把脚本写死成 3001 试试：
```html
"start": "set PORT=3001 && react-scripts start",
"electron": "wait-on http://localhost:3001 && cross-env NODE_ENV=development electron .",
"dev": "concurrently \"npm start\" \"npm run electron\""
```
（Mac/Linux 把 set PORT=3001 改成 PORT=3001 即可）
直接手动启动 Electron 看报错
保持 React 在 3000 跑着，另开一个终端：

cd 项目根目录
set NODE_ENV=development && electron .      # Windows
# 或
NODE_ENV=development electron .             # Mac/Linux
如果此时窗口弹出来了 → 说明 concurrently 那行脚本写得不对，换 cross-env 或把路径写绝对即可。
如果报 “Cannot find module …” 或 “build/electron.js 不存在” → 你 dev 时其实不需要 build 目录，Electron 会去读 public/electron.js，所以把 package.json 里的 main 字段临时改成：

"main": "public/electron.js"
仅开发阶段这样写，打包前再改回 "build/electron.js" 即可。
把脚本换成“稳态版本”
package.json 改成

```html

"main": "public/electron.js",           // 开发时指向源码
"scripts": {
  "start": "react-scripts start",
  "electron": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",
  "dev": "concurrently -k \"npm start\" \"npm run electron\"",
  "build": "react-scripts build",
  "postbuild": "echo 打包前记得把 main 改回 build/electron.js"
}
```
### 如何我项目跑着7982不要3000

```html
"main": "public/electron.js",        // 开发时指向源码
"scripts": {
  "start": "cross-env PORT=7982 react-scripts start",
  "electron": "wait-on tcp:7982 && cross-env NODE_ENV=development electron .",
  "dev": "concurrently -k \"npm run start\" \"npm run electron\"",
  "build": "react-scripts build",
  "dist": "npm run build && electron-builder"
}
```

### npm run dist之后大概多久可以

正常完整流程（你当前在哪一步）
✔ executing @electron/rebuild
✔ installing native dependencies
✔ packaging → 生成 dist/win-unpacked/（可运行绿色版）
⏳ 正在做 building embedded block map（生成差分升级用的哈希）
⏳ 正在做 making nsis（把 unpacked 目录压成 xxx Setup.exe）
✔ 结束，终端回到提示符

```html
• building       target=nsis file=dist\xxx Setup x.x.x.exe arch=x64
• building block map  blockMapFile=dist\xxx Setup x.x.x.exe.blockmap
Done in xxs
```
这算完成

### 是不是每次npm run dist要把原来的dist目录删除
⨯ remove D:\lq-demo\electrone-test\er-app\dist\win-unpacked\chrome_100_percent.pak: Access is denied.
github.com/develar/go-fs-util.EnsureEmptyDir
        /Users/runner/go/pkg/mod/github.com/develar/go-fs-util@v0.0.0-20190620175131-69a2d4542206/fs.go:98
github.com/develar/app-builder/pkg/electron.UnpackElectron.func1.1
        /Users/runner/work/app-builder/app-builder/pkg/electron/electronUnpack.go:38
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
        /Users/runner/work/app-builder/app-builder/pkg/util/async.go:68
runtime.goexit
        /Users/runner/hostedtoolcache/go/1.21.13/arm64/src/runtime/asm_amd64.s:1650
  ⨯ D:\lq-demo\electrone-test\er-app\node_modules\app-builder-bin\win\x64\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:
1  failedTask=build stackTrace=Error: D:\lq-demo\electrone-test\er-app\node_modules\app-builder-bin\win\x64\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code: 我提示这个

打包如果报占用端口，请执行以下命令
cmd : taskkill /f /im electron.exe 2>nul
 cmd : taskkill /f /im *.exe 2>nul# Getting Started with Create React App