doc: (CHANGES NEEDED) update readme
This commit is contained in:
Paul
parent
eb8b69966d
commit
ddf949f98b
118
README.md
118
README.md
|
|
@ -1,4 +1,4 @@
|
|||
# vite-react-electron
|
||||
# electron-vite-react
|
||||
|
||||
|
||||
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
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. 😋
|
||||
|
||||
|
|
@ -27,102 +27,70 @@ npm create electron-vite
|
|||
|
||||
|
||||
|
||||
<!--
|
||||
```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
|
||||
|
||||
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
|
||||
├── build Resources for the production build
|
||||
| ├── icon.icns Icon for the application on macOS
|
||||
| ├── icon.ico Icon for the application
|
||||
| ├── installerIcon.ico Icon for the application installer
|
||||
| └── uninstallerIcon.ico Icon for the application uninstaller
|
||||
|
|
||||
├── dist Generated after build according to the "packages" directory
|
||||
| ├── main
|
||||
| ├── preload
|
||||
| └── renderer
|
||||
├── electron Electron-related code
|
||||
| ├── main Main-process source code
|
||||
| ├── preload Preload-script source code
|
||||
| └── resources Resources for the production build
|
||||
| ├── icon.icns Icon for the application on macOS
|
||||
| ├── icon.ico Icon for the application
|
||||
| ├── installerIcon.ico Icon for the application installer
|
||||
| └── uninstallerIcon.ico Icon for the application uninstaller
|
||||
|
|
||||
├── release Generated after production build, contains executables
|
||||
| └──{version}
|
||||
| ├── win-unpacked Contains unpacked application executable
|
||||
| └── Setup.exe Installer for the application
|
||||
| ├── {os}-unpacked Contains unpacked application executable
|
||||
| └── Setup.{ext} Installer for the application
|
||||
|
|
||||
├── scripts
|
||||
| ├── build.mjs Develop script -> npm run build
|
||||
| └── 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
|
||||
├── public Static assets
|
||||
└── src Renderer source code, your React application
|
||||
```
|
||||
|
||||
## 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`
|
||||
|
||||
- **packages/preload/index.ts**
|
||||
- **electron/preload/index.ts**
|
||||
|
||||
```typescript
|
||||
import fs from "fs"
|
||||
import { contextBridge, ipcRenderer } from "electron"
|
||||
```typescript
|
||||
import fs from "fs";
|
||||
import { contextBridge, ipcRenderer } from "electron";
|
||||
|
||||
// --------- Expose some API to Renderer-process. ---------
|
||||
contextBridge.exposeInMainWorld("fs", fs)
|
||||
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer)
|
||||
```
|
||||
// --------- Expose some API to Renderer-process. ---------
|
||||
contextBridge.exposeInMainWorld("fs", fs);
|
||||
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer);
|
||||
```
|
||||
|
||||
- **packages/renderer/src/global.d.ts**
|
||||
- **electron/renderer/src/global.d.ts**
|
||||
|
||||
```typescript
|
||||
// Defined in the window
|
||||
interface Window {
|
||||
fs: typeof import("fs")
|
||||
ipcRenderer: import("electron").IpcRenderer
|
||||
}
|
||||
```
|
||||
```typescript
|
||||
// Defined in the window
|
||||
interface Window {
|
||||
fs: typeof import("fs");
|
||||
ipcRenderer: import("electron").IpcRenderer;
|
||||
}
|
||||
```
|
||||
|
||||
- **packages/renderer/src/main.ts**
|
||||
- **electron/renderer/src/main.ts**
|
||||
|
||||
```typescript
|
||||
// Use Electron and NodeJS API in the Renderer-process
|
||||
console.log("fs", window.fs)
|
||||
console.log("ipcRenderer", window.ipcRenderer)
|
||||
```
|
||||
```typescript
|
||||
// Use Electron and NodeJS API in the Renderer-process
|
||||
console.log("fs", window.fs);
|
||||
console.log("ipcRenderer", window.ipcRenderer);
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
- 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.
|
||||
|
||||
**Click to see more** 👉 [packages/main/vite.config.ts](https://github.com/caoxiemeihao/vite-react-electron/blob/main/packages/main/vite.config.ts)
|
||||
So they just need to configure Rollup.
|
||||
|
||||
```js
|
||||
export default {
|
||||
|
|
@ -138,7 +106,7 @@ export default {
|
|||
external: ["serialport", "sqlite3"],
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## `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.
|
||||
|
||||
- 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" />
|
||||
-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue