Skip to content

Commit 90ec6df

Browse files
MiniSuperDevMiniSuperDev
committed
feat: clone boilerplate
0 parents  commit 90ec6df

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1640
-0
lines changed

‎.gitignore

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
dist-electron
14+
release
15+
*.local
16+
17+
# Editor directories and files
18+
.vscode/.debug.env
19+
.idea
20+
.DS_Store
21+
*.suo
22+
*.ntvs*
23+
*.njsproj
24+
*.sln
25+
*.sw?
26+
27+
#lockfile
28+
package-lock.json
29+
pnpm-lock.yaml
30+
yarn.lock
31+
/test-results/
32+
/playwright-report/
33+
/playwright/.cache/

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
shamefully-hoist=true

‎.vscode/.debug.script.mjs

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import fs from 'node:fs'
2+
import path from 'node:path'
3+
import { fileURLToPath } from 'node:url'
4+
import { createRequire } from 'node:module'
5+
import { spawn } from 'node:child_process'
6+
7+
const pkg = createRequire(import.meta.url)('../package.json')
8+
const __dirname = path.dirname(fileURLToPath(import.meta.url))
9+
10+
// write .debug.env
11+
const envContent = Object.entries(pkg.debug.env).map(([key, val]) => `${key}=${val}`)
12+
fs.writeFileSync(path.join(__dirname, '.debug.env'), envContent.join('\n'))
13+
14+
// bootstrap
15+
spawn(
16+
// TODO: terminate `npm run dev` when Debug exits.
17+
process.platform === 'win32' ? 'npm.cmd' : 'npm',
18+
['run', 'dev'],
19+
{
20+
stdio: 'inherit',
21+
env: Object.assign(process.env, { VSCODE_DEBUG: 'true' }),
22+
},
23+
)

‎.vscode/extensions.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
// See http://go.microsoft.com/fwlink/?LinkId=827846
3+
// for the documentation about the extensions.json format
4+
"recommendations": [
5+
"mrmlnc.vscode-json5"
6+
]
7+
}

‎.vscode/launch.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"compounds": [
7+
{
8+
"name": "Debug App",
9+
"preLaunchTask": "Before Debug",
10+
"configurations": [
11+
"Debug Main Process",
12+
"Debug Renderer Process"
13+
],
14+
"presentation": {
15+
"hidden": false,
16+
"group": "",
17+
"order": 1
18+
},
19+
"stopAll": true
20+
}
21+
],
22+
"configurations": [
23+
{
24+
"name": "Debug Main Process",
25+
"type": "node",
26+
"request": "launch",
27+
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
28+
"windows": {
29+
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
30+
},
31+
"runtimeArgs": [
32+
"--no-sandbox",
33+
"--remote-debugging-port=9229",
34+
"."
35+
],
36+
"envFile": "${workspaceFolder}/.vscode/.debug.env",
37+
"console": "integratedTerminal"
38+
},
39+
{
40+
"name": "Debug Renderer Process",
41+
"port": 9229,
42+
"request": "attach",
43+
"type": "chrome",
44+
"timeout": 60000,
45+
"skipFiles": [
46+
"<node_internals>/**",
47+
"${workspaceRoot}/node_modules/**",
48+
"${workspaceRoot}/dist-electron/**",
49+
// Skip files in host(VITE_DEV_SERVER_URL)
50+
"http://127.0.0.1:7777/**"
51+
]
52+
},
53+
]
54+
}

‎.vscode/settings.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"typescript.tsc.autoDetect": "off",
4+
"json.schemas": [
5+
{
6+
"fileMatch": [
7+
"/*electron-builder.json5",
8+
"/*electron-builder.json"
9+
],
10+
"url": "https://json.schemastore.org/electron-builder"
11+
}
12+
]
13+
}

‎.vscode/tasks.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=733558
3+
// for the documentation about the tasks.json format
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"label": "Before Debug",
8+
"type": "shell",
9+
"command": "node .vscode/.debug.script.mjs",
10+
"isBackground": true,
11+
"problemMatcher": {
12+
"owner": "typescript",
13+
"fileLocation": "relative",
14+
"pattern": {
15+
// TODO: correct "regexp"
16+
"regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
17+
"file": 1,
18+
"line": 3,
19+
"column": 4,
20+
"code": 5,
21+
"message": 6
22+
},
23+
"background": {
24+
"activeOnStart": true,
25+
"beginsPattern": "^.*VITE v.* ready in \\d* ms.*$",
26+
"endsPattern": "^.*\\[startup\\] Electron App.*$"
27+
}
28+
}
29+
}
30+
]
31+
}

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 草鞋没号
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# electron-vite-react
2+
3+
[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
4+
![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470)
5+
![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d)
6+
![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron)
7+
[![Required Node.JS >= 14.18.0 || >=16.0.0](https://img.shields.io/static/v1?label=node&message=14.18.0%20||%20%3E=16.0.0&logo=node.js&color=3f893e)](https://nodejs.org/about/releases)
8+
9+
English | [简体中文](README.zh-CN.md)
10+
11+
## 👀 Overview
12+
13+
📦 Ready out of the box
14+
🎯 Based on the official [template-react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts), project structure will be familiar to you
15+
🌱 Easily extendable and customizable
16+
💪 Supports Node.js API in the renderer process
17+
🔩 Supports C/C++ native addons
18+
🐞 Debugger configuration included
19+
🖥 Easy to implement multiple windows
20+
21+
## 🛫 Quick Setup
22+
23+
```sh
24+
# clone the project
25+
git clone https://github.com/electron-vite/electron-vite-react.git
26+
27+
# enter the project directory
28+
cd electron-vite-react
29+
30+
# install dependency
31+
npm install
32+
33+
# develop
34+
npm run dev
35+
```
36+
37+
## 🐞 Debug
38+
39+
![electron-vite-react-debug.gif](/electron-vite-react-debug.gif)
40+
41+
## 📂 Directory structure
42+
43+
Familiar React application structure, just with `electron` folder on the top :wink:
44+
*Files in this folder will be separated from your React application and built into `dist-electron`*
45+
46+
```tree
47+
├── electron Electron-related code
48+
│ ├── main Main-process source code
49+
│ └── preload Preload-scripts source code
50+
│
51+
├── release Generated after production build, contains executables
52+
│ └── {version}
53+
│ ├── {os}-{os_arch} Contains unpacked application executable
54+
│ └── {app_name}_{version}.{ext} Installer for the application
55+
│
56+
├── public Static assets
57+
└── src Renderer source code, your React application
58+
```
59+
60+
<!--
61+
## 🚨 Be aware
62+
63+
This template integrates Node.js API to the renderer process by default. If you want to follow **Electron Security Concerns** you might want to disable this feature. You will have to expose needed API by yourself.
64+
65+
To get started, remove the option as shown below. This will [modify the Vite configuration and disable this feature](https://github.com/electron-vite/vite-plugin-electron-renderer#config-presets-opinionated).
66+
67+
```diff
68+
# vite.config.ts
69+
70+
export default {
71+
plugins: [
72+
...
73+
- // Use Node.js API in the Renderer-process
74+
- renderer({
75+
- nodeIntegration: true,
76+
- }),
77+
...
78+
],
79+
}
80+
```
81+
-->
82+
83+
## 🔧 Additional features
84+
85+
1. electron-updater 👉 [see docs](src/components/update/README.md)
86+
1. playwright
87+
88+
## ❔ FAQ
89+
90+
- [C/C++ addons, Node.js modules - Pre-Bundling](https://github.com/electron-vite/vite-plugin-electron-renderer#dependency-pre-bundling)
91+
- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies)

‎README.zh-CN.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# vite-react-electron
2+
3+
[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
4+
![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470)
5+
![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d)
6+
![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron)
7+
[![Required Node.JS >= 14.18.0 || >=16.0.0](https://img.shields.io/static/v1?label=node&message=14.18.0%20||%20%3E=16.0.0&logo=node.js&color=3f893e)](https://nodejs.org/about/releases)
8+
9+
[English](README.md) | 简体中文
10+
11+
## 概述
12+
13+
📦 开箱即用
14+
🎯 基于官方的 [template-react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts), 低侵入性
15+
🌱 结构清晰，可塑性强
16+
💪 支持在渲染进程中使用 Electron、Node.js API
17+
🔩 支持 C/C++ 模块
18+
🖥 很容易实现多窗口
19+
20+
## 快速开始
21+
22+
```sh
23+
# clone the project
24+
git clone https://github.com/electron-vite/electron-vite-react.git
25+
26+
# enter the project directory
27+
cd electron-vite-react
28+
29+
# install dependency
30+
npm install
31+
32+
# develop
33+
npm run dev
34+
```
35+
36+
## 调试
37+
38+
![electron-vite-react-debug.gif](/electron-vite-react-debug.gif)
39+
40+
## 目录
41+
42+
*🚨 默认情况下, `electron` 文件夹下的文件将会被构建到 `dist-electron`*
43+
44+
```tree
45+
├── electron Electron 源码文件夹
46+
│ ├── main Main-process 源码
47+
│ └── preload Preload-scripts 源码
48+
│
49+
├── release 构建后生成程序目录
50+
│ └── {version}
51+
│ ├── {os}-{os_arch} 未打包的程序(绿色运行版)
52+
│ └── {app_name}_{version}.{ext} 应用安装文件
53+
│
54+
├── public 同 Vite 模板的 public
55+
└── src 渲染进程源码、React代码
56+
```
57+
58+
<!--
59+
## 🚨 这需要留神
60+
61+
默认情况下，该模板在渲染进程中集成了 Node.js，如果你不需要它，你只需要删除下面的选项. [因为它会修改 Vite 默认的配置](https://github.com/electron-vite/vite-plugin-electron-renderer#config-presets-opinionated).
62+
63+
```diff
64+
# vite.config.ts
65+
66+
export default {
67+
plugins: [
68+
...
69+
- // Use Node.js API in the Renderer-process
70+
- renderer({
71+
- nodeIntegration: true,
72+
- }),
73+
...
74+
],
75+
}
76+
```
77+
-->
78+
79+
## 🔧 额外的功能
80+
81+
1. Electron 自动更新 👉 [阅读文档](src/components/update/README.zh-CN.md)
82+
2. Playwright 测试
83+
84+
## ❔ FAQ
85+
86+
- [C/C++ addons, Node.js modules - Pre-Bundling](https://github.com/electron-vite/vite-plugin-electron-renderer#dependency-pre-bundling)
87+
- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies)
88+
89+
## 🍵 🍰 🍣 🍟
90+
91+
<img width="270" src="https://github.com/caoxiemeihao/blog/blob/main/assets/$qrcode/$.png?raw=true">

‎build/icon.icns

455 KB
Binary file not shown.

‎build/icon.ico

53.9 KB
Binary file not shown.

‎build/icon.png

67 KB
Loading

‎e2e/example.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { test, expect, _electron as electron } from "@playwright/test";
2+
3+
test("homepage has title and links to intro page", async () => {
4+
const app = await electron.launch({ args: [".", "--no-sandbox"] });
5+
const page = await app.firstWindow();
6+
expect(await page.title()).toBe("Electron + Vite + React");
7+
await page.screenshot({ path: "e2e/screenshots/example.png" });
8+
});

‎e2e/screenshots/example.png

102 KB
Loading

0 commit comments

Comments
 (0)