vite-plugin-electron
Electron 🔗 Vite
English | 简体中文
- 🚀 Fully compatible with Vite and Vite's ecosystem (Based on Vite)
- 🎭 Flexible configuration
- 🐣 Few APIs, easy to use
- 🔥 Hot restart
Install
npm i vite-plugin-electron -D
Examples
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'
const win = new BrowserWindow({
title: 'Main window',
})
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
} else {
win.loadFile('yourOutputFile.html');
}
API (Define)
electron(config: Configuration | Configuration[])
export interface Configuration {
entry?: import('vite').LibraryOptions['entry']
vite?: import('vite').InlineConfig
onstart?: (this: import('rollup').PluginContext, options: {
/**
* Electron App startup function.
* It will mount the Electron App child-process to `process.electronApp`.
* @param argv default value `['.', '--no-sandbox']`
*/
startup: (argv?: string[]) => Promise<void>
/** Reload Electron-Renderer */
reload: () => void
}) => void | Promise<void>
}
JavaScript API
vite-plugin-electron
's JavaScript APIs are fully typed, and it's recommended to use TypeScript or enable JS type checking in VS Code to leverage the intellisense and validation.
Configuration
- typedefineConfig
- functionresolveViteConfig
- function, Resolve the default Vite's InlineConfig
for build Electron-MainwithExternalBuiltins
- functionbuild
- functionstartup
- function
Example
build(
withExternalBuiltins(
resolveViteConfig(
{
entry: 'foo.ts',
vite: {
mode: 'foo-mode',
plugins: [{
name: 'plugin-build-done',
closeBundle() {
startup()
},
}],
},
}
)
)
)
How to work
It just executes the electron .
command in the Vite build completion hook and then starts or restarts the Electron App.
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
Be aware
- 🚨 By default, the files in
electron
folder will be built into the dist-electron
- 🚨 Currently,
"type": "module"
is not supported in Electron - 🚨 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.
electron({
entry: 'electron/main.ts',
vite: {
build: {
rollupOptions: {
external: [
'serialport',
'sqlite3',
],
},
},
},
}),