Builder config, icons and typos in README
This commit is contained in:
Paul
parent
ef7e6f5814
commit
d72137c3bd
|
|
@ -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
145
README.md
|
|
@ -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" />
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue