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

Builder config, icons and typos in README

This commit is contained in:
Paul 2022-02-01 15:02:13 +02:00
parent ef7e6f5814
commit d72137c3bd
8 changed files with 117 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
.electron-builder.config.js Normal file
View File

@ -0,0 +1,38 @@
/**
* @type {import('electron-builder').Configuration}
* @see https://www.electron.build/configuration/configuration
*/
module.exports = {
appId: "YourAppID@qq.com",
productName: "YourAppName",
copyright: "Copyright © 2022 ${author}",
asar: true,
directories: {
output: "release/${version}",
buildResources: "build",
},
files: ["dist"],
win: {
target: [
{
target: "nsis",
arch: ["x64"],
},
],
artifactName: "${productName}-${version}-Setup.${ext}",
},
nsis: {
oneClick: false,
perMachine: false,
allowToChangeInstallationDirectory: true,
deleteAppDataOnUninstall: false,
},
mac: {
target: ["dmg"],
artifactName: "${productName}-${version}-Installer.${ext}",
},
linux: {
target: ["AppImage"],
artifactName: "${productName}-${version}-Installer.${ext}",
},
}

145
README.md
View File

@ -9,39 +9,53 @@
## Overview ## Overview
- Very simple Vite, React, Electron integration template. - Very simple Vite, React, Electron integration template.
- Contains only the basic dependencies. - Contains only the basic dependencies.
- The extend is very flexible. - The extension is very flexible.
## Run Setup ## Installation
```bash ```bash
# clone the project # clone the project
git clone git@github.com:caoxiemeihao/vite-react-electron.git git clone git@github.com:caoxiemeihao/vite-react-electron.git
# enter the project directory # open the project directory
cd vite-react-electron cd vite-react-electron
# install dependency # install dependencies
npm install npm install
# develop # start the application
npm run dev npm run dev
```
## Directory # make a production build
npm run build
```
Once `dev` or `build` npm-script executed will be generate named `dist` folder. It has children dir of same as `src` folder, the purpose of this design can ensure the correct path calculation. ## Directory structure
Once `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the `src` folder, the purpose of this design is to ensure the correct path calculation.
```tree ```tree
├ ├
├── dist After build, it's generated according to the "src" directory ├── 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 "src" directory
├ ├── main ├ ├── main
├ ├── preload ├ ├── preload
├ ├── renderer ├ ├── renderer
├ ├
├── release Generated after production build, contains executables
├ ├── {version}
├ ├── win-unpacked Contains unpacked application executable
├ ├── Setup.exe Installer for the application
├
├── scripts ├── scripts
├ ├── build.mjs Build script, for -> npm run build ├ ├── build.mjs Build script, for -> npm run build
├ ├── vite.config.mjs Marin-process, Preload-script vite-config ├ ├── vite.config.mjs Marin-process, Preload-script vite-config
@ -55,82 +69,79 @@ Once `dev` or `build` npm-script executed will be generate named `dist` folder.
├ ├
``` ```
## Use Electron, NodeJs API ## Use Electron and NodeJS API
> 🚧 By default, Electron don't support the use of API related to Electron and NodeJs in the Renderer-process, but someone still 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/caoxiemeihao/electron-vite-boilerplate)**
#### All Electron, NodeJs API invoke passed `Preload-script` #### Invoke Electron and NodeJS API in `Preload-script`
* **src/preload/index.ts** - **src/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)
``` ```
* **src/renderer/src/global.d.ts** - **src/renderer/src/global.d.ts**
```typescript ```typescript
// Defined on 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
} }
``` ```
* **src/renderer/src/main.ts** - **src/renderer/src/main.ts**
```typescript ```typescript
// Use Electron, NodeJs API in 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 Main-process ## Use SerialPort, SQLite3, or other node-native addons in the Main-process
- First, yout need to make sure the deps in "dependencies". Because the project still needs it 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 are just 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 view more** 👉 [scripts/vite.config.mjs](https://github.com/caoxiemeihao/electron-vue-vite/blob/main/scripts/vite.config.mjs) **Click to see more** 👉 [scripts/vite.config.mjs](https://github.com/caoxiemeihao/electron-vue-vite/blob/main/scripts/vite.config.mjs)
```js ```js
export default { export default {
build: { build: {
// built lib for Main-process, Preload-script // built lib for Main-process, Preload-script
lib: { lib: {
entry: 'index.ts', entry: "index.ts",
formats: ['cjs'], formats: ["cjs"],
fileName: () => '[name].js', fileName: () => "[name].js",
}, },
rollupOptions: { rollupOptions: {
// configuration here // configuration here
external: [ external: ["serialport", "sqlite3"],
'serialport', },
'sqlite3', },
],
},
},
} }
``` ```
## `dependencies` vs `devDependencies` ## `dependencies` vs `devDependencies`
- First, you need to know if deps(npm package) are still needed after packaged. - First, you need to know if your dependencies are needed after the application is packaged.
- Like [serialport](https://www.npmjs.com/package/serialport), [sqlite3](https://www.npmjs.com/package/sqlite3) they are node-native module 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.
- Like [vue](https://www.npmjs.com/package/vue), [react](https://www.npmjs.com/package/react) they are pure javascript module and can be built with Vite, so they can be placed in `devDependencies`. This reduces the volume of the built project. - 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.
## Shown ## Result
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" /> <img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
## Wechat group ## WeChat group
<img width="244px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" /> <img width="244px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" />

BIN
build/icon.icns Normal file
View File

Binary file not shown.

BIN
build/icon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
build/installerIcon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
build/uninstallerIcon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

33
electron-builder.json
View File

@ -1,33 +0,0 @@
{
"appId": "YouAppID@qq.com",
"asar": true,
"directories": {
"output": "release/${version}"
},
"files": [
"dist"
],
"mac": {
"artifactName": "${productName}_${version}.${ext}",
"target": [
"dmg"
]
},
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
],
"artifactName": "${productName}_${version}.${ext}"
},
"nsis": {
"oneClick": false,
"perMachine": false,
"allowToChangeInstallationDirectory": true,
"deleteAppDataOnUninstall": false
}
}

2
package.json
View File

@ -7,7 +7,7 @@
"main": "dist/main/index.cjs", "main": "dist/main/index.cjs",
"scripts": { "scripts": {
"dev": "node scripts/watch.mjs", "dev": "node scripts/watch.mjs",
"build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder" "build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder --config .electron-builder.config.js"
}, },
"engines": { "engines": {
"node": ">=14.17.0" "node": ">=14.17.0"