lixuechuan
/
electron-vite-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

doc: (CHANGES NEEDED) update readme

This commit is contained in:
Paul 2022-06-06 21:24:14 +03:00
parent eb8b69966d
commit ddf949f98b
1 changed files with 40 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
README.md
View File

@ -1,4 +1,4 @@
# vite-react-electron # electron-vite-react
![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470&style=flat) ![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470&style=flat)
![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d&style=flat) ![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d&style=flat)
@ -11,7 +11,7 @@
This is a `Vite`-integrated `Electron` template built with simplification in mind. This is a `Vite`-integrated `Electron` template built with simplification in mind.
The repo contains only the most basic files, dependencies and functionalities to ensure flexibility for various scenarios. The repo contains only the most basic files, dependencies and functionalities to ensure flexibility for various scenarios.
You need a basic understanding of `Electron` and `Vite` to get started. But that's not mandatory - you can learn almost all the details by reading through the source code. Trust me, this repo is not that complex. 😋 You need a basic understanding of `Electron` and `Vite` to get started. But that's not mandatory - you can learn almost all the details by reading through the source code. Trust me, this repo is not that complex. 😋
@ -27,102 +27,70 @@ npm create electron-vite
![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react-debug.gif?raw=true) ![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react-debug.gif?raw=true)
<!--
```sh
# clone the project
git clone https://github.com/caoxiemeihao/vite-react-electron.git
# open the project directory
cd vite-react-electron
# install dependencies
npm install
# start the application
npm run dev
# make a production build
npm run build
```
-->
## Directory structure ## Directory structure
Once `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the `packages` folder, the purpose of this design is to ensure the correct path calculation. Once `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the project, the purpose of this design is to ensure the correct path calculation.
```tree ```tree
├── build Resources for the production build ├── electron Electron-related code
| ├── icon.icns Icon for the application on macOS | ├── main Main-process source code
| ├── icon.ico Icon for the application | ├── preload Preload-script source code
| ├── installerIcon.ico Icon for the application installer | └── resources Resources for the production build
| └── uninstallerIcon.ico Icon for the application uninstaller | ├── icon.icns Icon for the application on macOS
| | ├── icon.ico Icon for the application
├── dist Generated after build according to the "packages" directory | ├── installerIcon.ico Icon for the application installer
| ├── main | └── uninstallerIcon.ico Icon for the application uninstaller
| ├── preload
| └── renderer
| |
├── release Generated after production build, contains executables ├── release Generated after production build, contains executables
| └──{version} | └──{version}
| ├── win-unpacked Contains unpacked application executable | ├── {os}-unpacked Contains unpacked application executable
| └── Setup.exe Installer for the application | └── Setup.{ext} Installer for the application
| |
├── scripts ├── public Static assets
| ├── build.mjs Develop script -> npm run build └── src Renderer source code, your React application
| └── watch.mjs Develop script -> npm run dev
|
├── packages
| ├── main Main-process source code
| | └── vite.config.ts
| ├── preload Preload-script source code
| | └── vite.config.ts
| └── renderer Renderer-process source code
| └── vite.config.ts
``` ```
## Use Electron and NodeJS API ## Use Electron and NodeJS API
> 🚧 By default, Electron doesn't support the use of API related to Electron and NodeJS in the Renderer process, but someone might need to use it. If so, you can see the template 👉 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)** > 🚧 By default, Electron doesn't support the use of API related to Electron and NodeJS in the Renderer process, but someone might need to use it. If so, you can see the template 👉 **[electron-vite-boilerplate](https://github.com/electron-vite/electron-vite-boilerplate)**
#### Invoke Electron and NodeJS API in `Preload-script` #### Invoke Electron and NodeJS API in `Preload-script`
- **packages/preload/index.ts** - **electron/preload/index.ts**
```typescript ```typescript
import fs from "fs" import fs from "fs";
import { contextBridge, ipcRenderer } from "electron" import { contextBridge, ipcRenderer } from "electron";
// --------- Expose some API to Renderer-process. --------- // --------- Expose some API to Renderer-process. ---------
contextBridge.exposeInMainWorld("fs", fs) contextBridge.exposeInMainWorld("fs", fs);
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer) contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer);
``` ```
- **packages/renderer/src/global.d.ts** - **electron/renderer/src/global.d.ts**
```typescript ```typescript
// Defined in the window // Defined in the window
interface Window { interface Window {
fs: typeof import("fs") fs: typeof import("fs");
ipcRenderer: import("electron").IpcRenderer ipcRenderer: import("electron").IpcRenderer;
} }
``` ```
- **packages/renderer/src/main.ts** - **electron/renderer/src/main.ts**
```typescript ```typescript
// Use Electron and NodeJS API in the Renderer-process // Use Electron and NodeJS API in the Renderer-process
console.log("fs", window.fs) console.log("fs", window.fs);
console.log("ipcRenderer", window.ipcRenderer) console.log("ipcRenderer", window.ipcRenderer);
``` ```
## Use SerialPort, SQLite3, or other node-native addons in the Main-process ## Use SerialPort, SQLite3, or other node-native addons in the Main-process
- First, you need to make sure that the dependencies in the `package.json` are NOT in the "devDependencies". Because the project will need them after packaged. - First, you need to make sure that the dependencies in the `package.json` are NOT in the "devDependencies". Because the project will need them after packaged.
- Main-process, Preload-script are also built with Vite, and they're built as [build.lib](https://vitejs.dev/config/#build-lib). - Main-process, Preload-script are also built with Vite, and they're built as [build.lib](https://vitejs.dev/config/#build-lib).
So they just need to configure Rollup. So they just need to configure Rollup.
**Click to see more** 👉 [packages/main/vite.config.ts](https://github.com/caoxiemeihao/vite-react-electron/blob/main/packages/main/vite.config.ts)
```js ```js
export default { export default {
@ -138,7 +106,7 @@ export default {
external: ["serialport", "sqlite3"], external: ["serialport", "sqlite3"],
}, },
}, },
} };
``` ```
## `dependencies` vs `devDependencies` ## `dependencies` vs `devDependencies`
@ -148,9 +116,3 @@ export default {
- Like [serialport](https://www.npmjs.com/package/serialport), [sqlite3](https://www.npmjs.com/package/sqlite3) they are node-native modules and should be placed in `dependencies`. In addition, Vite will not build them, but treat them as external modules. - Like [serialport](https://www.npmjs.com/package/serialport), [sqlite3](https://www.npmjs.com/package/sqlite3) they are node-native modules and should be placed in `dependencies`. In addition, Vite will not build them, but treat them as external modules.
- Dependencies like [Vue](https://www.npmjs.com/package/vue) and [React](https://www.npmjs.com/package/react), which are pure javascript modules that can be built with Vite, can be placed in `devDependencies`. This reduces the size of the application. - Dependencies like [Vue](https://www.npmjs.com/package/vue) and [React](https://www.npmjs.com/package/react), which are pure javascript modules that can be built with Vite, can be placed in `devDependencies`. This reduces the size of the application.
<!--
## Result
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
-->