diff --git a/README.md b/README.md index 501fc7a..6694a45 100644 --- a/README.md +++ b/README.md @@ -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 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. -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 ![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) - - ## 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. - -