electron-vite-boilerplate

TODO

• 🐞 SQLite3 is used in Renderer-process, which causes DevTools loading exception during HRM.
  在渲染进程中使用 SQLite3，在 HRM 时候会导致 DevTools 加载异常.
  DevTools was disconnected form the pate.

Overview

This is a project structure compact enough Electron + Vite template.

The project focus on the cooperation between Vite and Electron.

Enabled Electron and NodeJs in Renderer-process by vite-plugin-electron-renderer.

Like this

// In Renderer-process

import { readFileSync } from 'fs'
import { ipcRenderer } from 'electron'

readFileSync(/* something */)
ipcRenderer.on(/* something */)

Run Setup

# clone the project
git clone https://github.com/caoxiemeihao/electron-vite-boilerplate.git

# enter the project directory
cd electron-vite-boilerplate

# install dependency
npm install

# develop
npm run dev

Directory

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.

├
├── dist                      After build, it's generated according to the "packages" directory
├   ├── main
├   ├── preload
├   ├── renderer
├
├── 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
├

🚧 Use SerialPort, SQLite3 or other node-native addons in Renderer-process

1. First, yout need to make sure the deps in "dependencies". Because the project still needs it after packaged.

2. Second, node-native addons may not be Pre-Bundling correctly by Vite. So you need avoid this, and import it like ordinary NodeJs module.

3. Third, through the above description, you can correctly import node-native addons in two ways.

The first way - Use CommonJS syntax

// In Renderer-process
const SerialPort = require('serialport')
const sqlite3 = require('sqlite3')

The second way - Use ESModule syntax - Recommend 🎉

// In Renderer-process
import serialport from 'serialport'
import sqlite3 from 'sqlite3'

This way is actually just a syntax-sugar of CommonJS syntax. At the same time, vite-plugin-electron-renderer needs to be configured.

Click to see more 👉 packages/renderer/vite.config.ts

import electronRenderer from 'vite-plugin-electron-renderer'

export default {
  plugins: [
    electronRenderer({
      // configuration here
      resolve: {
        serialport: 'export default require("serialport");',
        sqlite3: 'export default require("sqlite3");',
      },
    }),
  ],
}

Use SerialPort, SQLite3 or other node-native addons in Main-process

Main-process, Preload-script are also built with Vite, and they are just built as build.lib.
So they just need to configure Rollup.

Click to see more 👉 packages/main/vite.config.ts

export default {
  build: {
    // built lib for Main-process, Preload-script
    lib: {
      entry: 'index.ts',
      formats: ['cjs'],
      fileName: () => '[name].js',
    },
    rollupOptions: {
      // configuration here
      external: [
        'serialport',
        'sqlite3',
      ],
    },
  },
}

⚠️ pnpm

The "node_modules" file structure generated by "pnpm" will lead to errors in the packaging of "electron builder". For example, the project needs to use "SQLite3"

Wechat