From b0320cab5dd92ebdb5509a5c355c36546ad47046 Mon Sep 17 00:00:00 2001 From: Paul <40315177+PAXANDDOS@users.noreply.github.com> Date: Mon, 6 Jun 2022 21:19:47 +0300 Subject: [PATCH 1/8] feat: vscode recommended extensions --- .vscode/extensions.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .vscode/extensions.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..47466d4 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,10 @@ +{ + // See http://go.microsoft.com/fwlink/?LinkId=827846 + // for the documentation about the extensions.json format + "recommendations": [ + "editorconfig.editorconfig", + "mrmlnc.vscode-json5", + "rbbit.typescript-hero", + "syler.sass-indented", + ] +} From bcb61bcebbcb09c7dfdcf0eb63ab7810ca42d590 Mon Sep 17 00:00:00 2001 From: Paul <40315177+PAXANDDOS@users.noreply.github.com> Date: Mon, 6 Jun 2022 21:21:10 +0300 Subject: [PATCH 2/8] feat: improve json5 --- electron-builder.json5 | 54 +++++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/electron-builder.json5 b/electron-builder.json5 index a0824d0..36247cf 100644 --- a/electron-builder.json5 +++ b/electron-builder.json5 @@ -2,36 +2,36 @@ * @see https://www.electron.build/configuration/configuration */ { - "appId": "YourAppID", - "productName": "YourAppName", - "copyright": "Copyright © 2022 ${author}", - "asar": true, - "directories": { - "output": "release/${version}", - "buildResources": "electron/resources" + appId: "YourAppID", + productName: "YourAppName", + copyright: "Copyright © 2022 ${author}", + asar: true, + directories: { + output: "release/${version}", + buildResources: "electron/resources", }, - "files": ["dist"], - "win": { - "target": [ + files: ["dist"], + win: { + target: [ { - "target": "nsis", - "arch": ["x64"] - } + target: "nsis", + arch: ["x64"], + }, ], - "artifactName": "${productName}-${version}-Setup.${ext}" + artifactName: "${productName}-${version}-Setup.${ext}", }, - "nsis": { - "oneClick": false, - "perMachine": false, - "allowToChangeInstallationDirectory": true, - "deleteAppDataOnUninstall": false + nsis: { + oneClick: false, + perMachine: false, + allowToChangeInstallationDirectory: true, + deleteAppDataOnUninstall: false, }, - "mac": { - "target": ["dmg"], - "artifactName": "${productName}-${version}-Installer.${ext}" + mac: { + target: ["dmg"], + artifactName: "${productName}-${version}-Installer.${ext}", }, - "linux": { - "target": ["AppImage"], - "artifactName": "${productName}-${version}-Installer.${ext}" - } -} \ No newline at end of file + linux: { + target: ["AppImage"], + artifactName: "${productName}-${version}-Installer.${ext}", + }, +} From aff8ccb7c9d94c856b9d313c3e6da4f067508847 Mon Sep 17 00:00:00 2001 From: Paul <40315177+PAXANDDOS@users.noreply.github.com> Date: Mon, 6 Jun 2022 21:22:29 +0300 Subject: [PATCH 3/8] refactor: move styles to assets --- src/{ => assets}/styles/app.module.scss | 0 src/{ => assets}/styles/index.css | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/{ => assets}/styles/app.module.scss (100%) rename src/{ => assets}/styles/index.css (100%) diff --git a/src/styles/app.module.scss b/src/assets/styles/app.module.scss similarity index 100% rename from src/styles/app.module.scss rename to src/assets/styles/app.module.scss diff --git a/src/styles/index.css b/src/assets/styles/index.css similarity index 100% rename from src/styles/index.css rename to src/assets/styles/index.css From 0edc38fc9d92be5b999213bba1c535b05f85381a Mon Sep 17 00:00:00 2001 From: Paul <40315177+PAXANDDOS@users.noreply.github.com> Date: Mon, 6 Jun 2022 21:23:07 +0300 Subject: [PATCH 4/8] feat: use path aliases, improve TS --- src/App.tsx | 4 ++-- src/main.tsx | 4 ++-- tsconfig.json | 6 ++++++ vite.config.ts | 12 +++++++++--- 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a221ef7..bb8e260 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,9 +2,9 @@ import { useState } from 'react' import electron from '/electron.png' import react from '/react.svg' import vite from '/vite.svg' -import styles from './styles/app.module.scss' +import styles from 'styles/app.module.scss' -const App = () => { +const App: React.FC = () => { const [count, setCount] = useState(0) return ( diff --git a/src/main.tsx b/src/main.tsx index 5a66d35..aa9724a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,9 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' -import './styles/index.css' +import 'styles/index.css' -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( +ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/tsconfig.json b/tsconfig.json index 3f209ea..129756a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,13 @@ { "compilerOptions": { + "baseUrl": ".", "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], + "paths": { + "@/*": ["src/*"], + "styles/*": ["src/assets/styles/*"] + }, "allowJs": false, "skipLibCheck": true, "esModuleInterop": false, @@ -19,3 +24,4 @@ "include": ["src", "types.d.ts"], "references": [{ "path": "./tsconfig.node.json" }] } + diff --git a/vite.config.ts b/vite.config.ts index 0957c18..ed5cc10 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,10 +5,16 @@ import react from '@vitejs/plugin-react' import electron from 'vite-plugin-electron' import renderer from 'vite-plugin-electron/renderer' -rmSync('dist', { recursive: true, force: true }) // v14.14.0 +rmSync(join(__dirname, 'dist'), { recursive: true, force: true }) // v14.14.0 // https://vitejs.dev/config/ export default defineConfig({ + resolve: { + alias: { + '@': join(__dirname, 'src'), + 'styles': join(__dirname, 'src/assets/styles'), + }, + }, plugins: [ react(), electron({ @@ -22,7 +28,7 @@ export default defineConfig({ }, preload: { input: { - // You can configure multiple preload here + // You can configure multiple preload scripts here splash: join(__dirname, 'electron/preload/splash.ts'), }, vite: { @@ -33,7 +39,7 @@ export default defineConfig({ }, }, }), - // Enable use Electron, Node.js API in Renderer-process + // Enables use of Node.js API in the Renderer-process renderer(), ] }) From eb8b69966d8a2b2f293985074729002d0c7142a7 Mon Sep 17 00:00:00 2001 From: Paul <40315177+PAXANDDOS@users.noreply.github.com> Date: Mon, 6 Jun 2022 21:23:25 +0300 Subject: [PATCH 5/8] refactor: minor changes --- .vscode/launch.json | 2 +- electron/main/index.ts | 4 ++-- electron/preload/splash.ts | 1 - src/global.d.ts | 3 +-- types.d.ts | 1 - 5 files changed, 4 insertions(+), 7 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index a53b0fc..15a1e53 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -30,7 +30,7 @@ }, "runtimeArgs": [ "--remote-debugging-port=9229", - "${workspaceRoot}/dist/main/index.cjs" + "${workspaceRoot}/dist/electron/main/index.cjs" ], "envFile": "${workspaceFolder}/.vscode/.debug.env" }, diff --git a/electron/main/index.ts b/electron/main/index.ts index 3312c09..30a395a 100644 --- a/electron/main/index.ts +++ b/electron/main/index.ts @@ -15,9 +15,9 @@ if (!app.requestSingleInstanceLock()) { process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' let win: BrowserWindow | null = null -// Here, you can also use other preload +// Here you can add more preload scripts const splash = join(__dirname, '../preload/splash.js') -// 🚧 Use ['ENV_NAME'] avoid vite:define plugin +// 🚧 Use ['ENV_NAME'] to avoid vite:define plugin const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}` async function createWindow() { diff --git a/electron/preload/splash.ts b/electron/preload/splash.ts index ea48210..90c0647 100644 --- a/electron/preload/splash.ts +++ b/electron/preload/splash.ts @@ -1,4 +1,3 @@ - function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) { return new Promise(resolve => { if (condition.includes(document.readyState)) { diff --git a/src/global.d.ts b/src/global.d.ts index 8d1a260..677ff6f 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,9 +1,8 @@ - export { } declare global { interface Window { - // Expose some Api through preload script + // Expose API through preload script fs: typeof import('fs') ipcRenderer: import('electron').IpcRenderer removeLoading: () => void diff --git a/types.d.ts b/types.d.ts index b435aec..7d79242 100644 --- a/types.d.ts +++ b/types.d.ts @@ -1,4 +1,3 @@ - declare namespace NodeJS { interface ProcessEnv { NODE_ENV: 'development' | 'production' From ddf949f98baa61db475f99373c7e65d67b2f1015 Mon Sep 17 00:00:00 2001 From: Paul <40315177+PAXANDDOS@users.noreply.github.com> Date: Mon, 6 Jun 2022 21:24:14 +0300 Subject: [PATCH 6/8] doc: (CHANGES NEEDED) update readme --- README.md | 118 ++++++++++++++++++------------------------------------ 1 file changed, 40 insertions(+), 78 deletions(-) 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. - - From 9359140dbee9aa194d0d7ba129eb83c02af18aaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com> Date: Tue, 7 Jun 2022 07:22:07 +0800 Subject: [PATCH 7/8] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6694a45..922a269 100644 --- a/README.md +++ b/README.md @@ -21,11 +21,11 @@ You need a basic understanding of `Electron` and `Vite` to get started. But that npm create electron-vite ``` -![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react.gif?raw=true) +![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react.gif?raw=true) ## Debug -![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/public/electron-vite-react-debug.gif?raw=true) ## Directory structure @@ -67,7 +67,7 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer); ``` -- **electron/renderer/src/global.d.ts** +- **src/global.d.ts** ```typescript // Defined in the window @@ -77,7 +77,7 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate } ``` -- **electron/renderer/src/main.ts** +- **src/main.ts** ```typescript // Use Electron and NodeJS API in the Renderer-process From f8677670efbe24bbc69343495342a18d6bfe93c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com> Date: Tue, 7 Jun 2022 07:23:08 +0800 Subject: [PATCH 8/8] fix: `index.cjs` -> `index.js` --- .vscode/launch.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 15a1e53..5a3faef 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -30,7 +30,7 @@ }, "runtimeArgs": [ "--remote-debugging-port=9229", - "${workspaceRoot}/dist/electron/main/index.cjs" + "${workspaceRoot}/dist/electron/main/index.js" ], "envFile": "${workspaceFolder}/.vscode/.debug.env" },