electron-vue-vite

English | 简体中文

🥳 Real simple Electron + Vue3 + Vite2 boilerplate.

Overview

This is an 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.

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 souce code. Trust me, this repo is not that complex. 😋

Run Setup

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

# enter the project directory
cd electron-vue-vite

# install dependency
npm install

# develop
npm run dev

Directory

A dist folder will be generated everytime when dev or build command is executed. File structure of dist is identical to the packages directory to avoid any potential path calculation errors.

├
├── dist                      Will be generated following the structure of "packages" directory
├   ├── main
├   ├── preload
├   ├── renderer
├
├── scripts
├   ├── build.mjs             Build 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 Electron, NodeJs API

🚧 By default, using Electron or NodeJS API in the rederer process is discouraged. For anyone who needs to bypass this security constrain, take a look at this template 👉 electron-vite-boilerplate

As electron suggested, if you need access to the Electron and NodeJS API in the renderer process, you need to create a context bridge and expose the APIs you need to the renderer process.

Note that if your project uses typescript, you also need to add type declearations to Window interface.

• packages/preload/index.ts

  import fs from 'fs'
  import { contextBridge, ipcRenderer } from 'electron'
  
  // --------- Expose some API to Renderer-process. ---------
  contextBridge.exposeInMainWorld('fs', fs)
  contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
  

• packages/renderer/src/global.d.ts

  // Defined on the window
  interface Window {
    fs: typeof import('fs')
    ipcRenderer: import('electron').IpcRenderer
  }
  

• packages/renderer/src/main.ts

  // Use Electron, NodeJs API in Renderer-process
  console.log('fs', window.fs)
  console.log('ipcRenderer', window.ipcRenderer)
  

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

• First you need to make sure the packages are listed in the "dependencies", since they are still needed during runtime after the project is bundled.

• Source code of main process and preload scripts are also bundled with Vitebuild.lib. Rollup configurations are needed.

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',
      ],
    },
  },
}

dependencies vs devDependencies

• First, you need to know if the package is still needed during runtime after packaged.

• Packages like serialport, sqlite3 are node-native modules and should be placed in dependencies. Vite will not build them and will treat them as externals.

• Packages like vue, react are pure javascript modules and can be built with Vite. They can be listed in devDependencies which helps reducing the size of bundled product.

Main window

Wechat