vite-plugin-electron

vite-plugin-electron

Integrate Vite and Electron

English | 简体中文

• 🐣 Few APIs, easy to use
• 🚀 Fully compatible with Vite configuration

Install

npm i vite-plugin-electron -D

Examples

• quick-start
• custom-start-electron-app
• nodeIntegration
• worker

Usage

vite.config.ts

import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
    }),
  ],
}

You can use process.env.VITE_DEV_SERVER_URL when the vite command is called 'serve'

// electron main.js
const win = new BrowserWindow({
  title: 'Main window',
})

if (process.env.VITE_DEV_SERVER_URL) {
  win.loadURL(process.env.VITE_DEV_SERVER_URL)
} else {
  // load your file
  win.loadFile('yourOutputFile.html');
}

API _^(Define)

electron(config: Configuration | Configuration[])

export interface Configuration {
  /**
   * Shortcut of `build.lib.entry`
   */
  entry?: import('vite').LibraryOptions['entry']
  vite?: import('vite').InlineConfig
  /**
   * Triggered when Vite is built every time.
   * 
   * If this `onstart` is passed, Electron App will not start automatically.  
   * However, you can start Electroo App via `startup` function.  
   */
  onstart?: (
    this: import('rollup').PluginContext,
    options: {
      /** Electron App startup function */
      startup: (args?: string[]) => Promise<void>
      /** Reload Electron-Renderer */
      reload: () => void
    },
  ) => void
}

How to work

The plugin is just the encapsulation of the built-in scripts of electron-vite-boilerplate/scripts

Recommend structure

Let's use the official template-vanilla-ts created based on create vite as an example

+ ├─┬ electron
+ │ └── main.ts
  ├─┬ src
  │ ├── main.ts
  │ ├── style.css
  │ └── vite-env.d.ts
  ├── .gitignore
  ├── favicon.svg
  ├── index.html
  ├── package.json
  ├── tsconfig.json
+ └── vite.config.ts

• 🚨 By default, the files in electron folder will be built into the dist/electron
• 🚨 Currently, "type": "module" is not supported in Electron

Put Node.js packages in dependencies

Electron-Main

In general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages. So, put your Node.js package in dependencies. Unless you know how to properly build them with Vite.

By default, vite-plugin-electron treats packages in dependencies as external modules.

Electron-Renderer

You can see 👉 dependencies vs devDependencies

Changelog

0.10.2 (2022-10-24)

By default, the dist folder will be automatically removed by Vite. We build Electron related files into dist-electron to prevent it from being removed by mistake

1. Remove Vite 3.2.0 | #90
2. ad9bb3c refactor(electron-renderer)!: remove options.resolve(), use 'lib-esm' for resolve Node.js modules and electron | vite-plugin-electron-renderer
3. b500039 feat(electron-renderer): support optimizeDeps for Electron-Renderer 🚀
4. f28e66b faet(outDir)!: dist/electron -> dist-electron | vite-plugin-electron