https://github.com/wyyxdgm/electron-react-app
electron react app
https://github.com/wyyxdgm/electron-react-app
antd debug electron electron-log electron-react electron-store independent-development-mode react react-app react-devtools typescript
Last synced: about 2 months ago
JSON representation
electron react app
- Host: GitHub
- URL: https://github.com/wyyxdgm/electron-react-app
- Owner: wyyxdgm
- License: gpl-3.0
- Created: 2020-11-15T14:53:23.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-05T06:28:43.000Z (over 4 years ago)
- Last Synced: 2025-01-18T01:32:10.421Z (3 months ago)
- Topics: antd, debug, electron, electron-log, electron-react, electron-store, independent-development-mode, react, react-app, react-devtools, typescript
- Language: JavaScript
- Homepage:
- Size: 2.59 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# electron-react-app
整合`react-app`和`electron`的独立开发模式
- [环境要求](#环境要求)
- [开发&打包](#开发相关)
- [项目概要](#项目概要)
## 环境要求
### 版本
node: `v12.18.1`
npm: `6.14.8`
yarn: `1.22.4`
electron-forge: `6.0.0-beta.54`
### 全局依赖安装
- [node](https://nodejs.org/en/)
- [yarn](https://yarn.bootcss.com/docs/install/#mac-stable)
- [electron](https://www.electronforge.io/)
## 开发相关
### 初始化
```bash
yarn binit
```
### 本地开发
```bash
yarn bstart
```
### 打包&&编译应用
```bash
yarn bmake
```
## 项目概要
### electron初始化
```bash
yarn create electron-app electron-react-app
```
### react初始化
```bash
yarn create react-app react-app --template typescript
cd react-app
yarn add antd
yarn start
```
### 更改react打包路径
默认生成目标路径为`react-app/build`，调整为`src/view`，(配置文件`react-app/config/paths.js`)
相关代码：
```js
{
appBuild: resolveApp('../src/view'),
}
```
### 启动浏览器替换成启动electron
通过修改`react-app/scripts/start.js`添加`startElectron`变量，决定否同步启动`electron`
相关代码：
```js
require("child_process").spawn("yarn", ["startElectron"]);
```
### 系统引入其他支持
- 数据存储：使用`electron-store`进行数据持久化
- 志打印：使用`electron-log`打印日志
- 调试主线程: 可使用`vscode`调试主线程