qiusa/electron-vite-boilerplate

Electron + Vite + TypeScript. Support SerialPort, SQLite3 and node C/C++ addons.

electron-vite-boilerplate

Overview

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

The project focus on the cooperation between Vite and Electron.

The template lists some common cases as much as possible.

Run Setup

# clone the project
git clone https://github.com/electron-vite/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 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',
      ],
    },
  },
}

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

You can see the branch 👉 nodeIntegration

List of integrated modules

ES Modules

• execa
• file-type
• move-file
• node-fetch

Native Addons(C/C++)

• sqlite3
• serialport

⚠️ 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"