\n\n \n\nIn short, `vite-plugin-electron` makes developing Electron apps as easy as normal Vite projects.\n\n## Features\n\n- [๐ฅ Hot Restart (Main process)](https://electron-vite.github.io/guide/features.html#hot-restart)\n- [๐ Hot Reload (Preload scripts)](https://electron-vite.github.io/guide/features.html#hot-reload)\n- [โก๏ธ HMR (Renderer process)](https://electron-vite.github.io/guide/features.html#hmr)\n- [๐ Not Bundle, It's fast (Like Vite's Not Bundle)](https://github.com/electron-vite/vite-plugin-electron#not-bundle)\n- ๐ฑ Fully compatible with Vite and Vite's ecosystem (Based on Vite)\n- ๐ฃ Few APIs, easy to use\n\n\n\n## Quick Setup\n\n1. Add the following dependency to your project\n\n```sh\nnpm i -D vite-plugin-electron\n```\n\n2. Add `vite-plugin-electron` to the `plugins` section of `vite.config.ts`\n\n```js\nimport electron from 'vite-plugin-electron'\n\nexport default {\n plugins: [\n electron({\n entry: 'electron/main.ts',\n }),\n ],\n}\n```\n\n3. Create the `electron/main.ts` file and type the following code\n\n```js\nimport { app, BrowserWindow } from 'electron'\n\napp.whenReady().then(() => {\n const win = new BrowserWindow({\n title: 'Main window',\n })\n\n // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`\n if (process.env.VITE_DEV_SERVER_URL) {\n win.loadURL(process.env.VITE_DEV_SERVER_URL)\n } else {\n // Load your file\n win.loadFile('dist/index.html');\n }\n})\n```\n\n4. Add the `main` entry to `package.json`\n\n```diff\n{\n+ \"main\": \"dist-electron/main.js\"\n}\n```\n\nThat's it! You can now use Electron in your Vite app โจ\n\n## Simple API\n\nMany times, for a developer who is new to Vite and Electron, the oversimplified and open API design is confusing to them. Maybe Simple API makes them easier to understand. :)\n\n```js\n// Just like v0.9.x\nimport electron from 'vite-plugin-electron/simple'\n\nexport default {\n plugins: [\n electron({\n main: {\n // Shortcut of `build.lib.entry`\n entry: 'electron/main.ts',\n },\n preload: {\n // Shortcut of `build.rollupOptions.input`\n input: 'electron/preload.ts',\n },\n // Optional: Use Node.js API in the Renderer process\n renderer: {},\n }),\n ],\n}\n```\n\n## API (Define)\n\n`electron(options: ElectronOptions | ElectronOptions[])`\n\n```ts\nexport interface ElectronOptions {\n /**\n * Shortcut of `build.lib.entry`\n */\n entry?: import('vite').LibraryOptions['entry']\n vite?: import('vite').InlineConfig\n /**\n * Triggered when Vite is built every time -- `vite serve` command only.\n * \n * If this `onstart` is passed, Electron App will not start automatically. \n * However, you can start Electroo App via `startup` function. \n */\n onstart?: (args: {\n /**\n * Electron App startup function. \n * It will mount the Electron App child-process to `process.electronApp`. \n * @param argv default value `['.', '--no-sandbox']`\n */\n startup: (argv?: string[]) => Promise\n /** Reload Electron-Renderer */\n reload: () => void\n }) => void | Promise\n}\n```\n\n## Recommend Structure\n\nLet's use the official [template-vanilla-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla-ts) created based on `create vite` as an example\n\n```diff\n+ โโโฌ electron\n+ โ โโโ main.ts\n โโโฌ src\n โ โโโ main.ts\n โ โโโ style.css\n โ โโโ vite-env.d.ts\n โโโ .gitignore\n โโโ favicon.svg\n โโโ index.html\n โโโ package.json\n โโโ tsconfig.json\n+ โโโ vite.config.ts\n```\n\n## Examples\n\nThere are many cases here ๐ [electron-vite-samples](https://github.com/caoxiemeihao/electron-vite-samples)\n\n## JavaScript API\n\n`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.\n\n- `ElectronOptions` - type\n- `resolveViteConfig` - function, Resolve the default Vite's `InlineConfig` for build Electron-Main\n- `withExternalBuiltins` - function\n- `build` - function\n- `startup` - function\n\n**Example**\n\n```js\nimport { build, startup } from 'vite-plugin-electron'\n\nconst isDev = process.env.NODE_ENV === 'development'\nconst isProd = process.env.NODE_ENV === 'production'\n\nbuild({\n entry: 'electron/main.ts',\n vite: {\n mode: process.env.NODE_ENV,\n build: {\n minify: isProd,\n watch: isDev ? {} : null,\n },\n plugins: [{\n name: 'plugin-start-electron',\n closeBundle() {\n if (isDev) {\n // Startup Electron App\n startup()\n }\n },\n }],\n },\n})\n```\n\n## How to work\n\nIt just executes the `electron .` command in the Vite build completion hook and then starts or restarts the Electron App.\n\n## Be aware\n\n- ๐จ By default, the files in `electron` folder will be built into the `dist-electron`\n- ๐จ Currently, `\"type\": \"module\"` is not supported in Electron\n\n## C/C++ Native\n\nWe have two ways to use C/C++ native modules\n\n**First way**\n\nIn general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages\n\nSo, put your Node.js package in `dependencies`. Unless you know how to properly build them with Vite\n\n```js\nexport default {\n plugins: [\n electron({\n entry: 'electron/main.ts',\n vite: {\n build: {\n rollupOptions: {\n // Here are some C/C++ modules them can't be built properly\n external: [\n 'serialport',\n 'sqlite3',\n ],\n },\n },\n },\n }),\n ],\n}\n```\n\n**Second way**\n\nUse ๐ [vite-plugin-native](https://github.com/vite-plugin/vite-plugin-native)\n\n```js\nimport native from 'vite-plugin-native'\n\nexport default {\n plugins: [\n electron({\n entry: 'electron/main.ts',\n vite: {\n plugins: [\n native(/* options */),\n ],\n },\n }),\n ],\n}\n```\n\n\n\n---\n\n## Not Bundle\n\n> Added in: v0.13.0\n\nDuring the development phase, we can exclude the `cjs` format of npm-pkg from bundle. Like Vite's [๐ Not Bundle](https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild). **It's fast**!\n\n```js\nimport electron from 'vite-plugin-electron'\nimport { notBundle } from 'vite-plugin-electron/plugin'\n\nexport default defineConfig(({ command }) => ({\n plugins: [\n electron({\n entry: 'electron/main.ts',\n vite: {\n plugins: [\n command === 'serve' && notBundle(/* NotBundleOptions */),\n ],\n },\n }),\n ],\n}))\n```\n\n**API**\n\n`notBundle(/* NotBundleOptions */)`\n\n```ts\nexport interface NotBundleOptions {\n filter?: (id: string) => void | false\n}\n```\n\n**How to work**\n\nLet's use the `electron-log` as an examples.\n\n```js\nโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\nโ import log from 'electron-log' โ\nโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n โ\nModules in `node_modules` are not bundled during development, it's fast!\n โ\nโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\nโ const log = require('electron-log') โ\nโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n```\n\n## FAQ\n\n- `electron` does not exit correctly | ไฝฟ็จctrl + c ๅๆญขไปฃ็ ๏ผelectronๅๅฐไธๅ ณ้ญ | [#122](https://github.com/electron-vite/vite-plugin-electron/pull/122), [#168](https://github.com/electron-vite/vite-plugin-electron/issues/168)\n\n * Add `tree-kill` into you dependencies, `npm i -D tree-kill`.\n\n","readmeFilename":"README.md"}
![](\"https://github.com/electron-vite/vite-plugin-electron/blob/main/logo.svg?raw=true\"){kind=logo}
\n![](\"https://img.shields.io/npm/v/vite-plugin-electron.svg\")
\n ![](\"https://img.shields.io/npm/dm/vite-plugin-electron.svg\")
\n ![](\"https://img.shields.io/badge/chat-discord-blue?logo=discord\"){kind=icon}
\n