
Product
Introducing Socket MCP for Claude Desktop
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
vite-electron-plugin
Advanced tools
High-performance, esbuild-based Vite Electron plugin
npm i -D vite-electron-plugin
vite-electron-plugin
into vite.config.ts
import electron from 'vite-electron-plugin'
export default {
plugins: [
electron({
include: [
// The Electron source codes directory
'electron',
],
}),
],
}
electron/main.ts
and type the following codeimport { app, BrowserWindow } from 'electron'
app.whenReady().then(() => {
const win = new BrowserWindow()
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
} else {
win.loadFile('dist/index.html')
}
})
package.json
{
+ "main": "dist-electron/main.js"
}
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
reload.ext
(e.g. foo.reload.js
, preload.ts
) after an update,electron(config: Configuration)
Key | Type | Description | Required | Default |
---|---|---|---|---|
include | Array |
directory or filename or glob Array.Must be a relative path, which will be calculated based on the root .If it is an absolute path, it can only be a subpath of root. Otherwise it will cause the output file path to be calculated incorrectly. | ā | |
root | string | process.cwd() | ||
outDir | string | Output Directory. | dist-electron | |
api | Record<string, any> | Useful if you want to pass some payload to the plugin. | ||
plugins | Plugin[] | See the Plugin API. | ||
logger | { [type: string], (...message: string[]) => void } | Custom log. If logger is passed, all logs will be input this option | ||
transformOptions | import('esbuild').TransformOptions | Options of esbuild.transform() | ||
watch | import('chokidar').WatchOptions | Options of chokidar.watch() |
The design of plugin is similar to Vite's plugin. But simpler, only 4 hooks in total.
configResolved
(config: ResolvedConfig) => void | Promise<void>
async
, sequential
You can freely modify the config
argument in ths hooks or use.
onwatch
serve only(envet: 'add' | 'change' | 'addDir' | 'unlink' | 'unlinkDir', path: string) => void
async
, parallel
Triggered by include
file changes. You can emit some files in this hooks. Even restart the Electron App.
transform
(args: { filename: string, code: string, done: () => void }) => string | import('esbuild').TransformResult | void | Promise<string | import('esbuild').TransformResult | void>
async
, sequential
Triggered by changes in extensions
files in include.
ondone
(args: { filename: string, distname: string }) => void
async
, parallel
Triggered when transform()
ends or a file in extensions
is removed.
import path from 'node:path'
import electron from 'vite-electron-plugin'
import {
alias,
copy,
dest,
esmodule,
customStart,
loadViteEnv,
} from 'vite-electron-plugin/plugin'
export default {
plugins: [
electron({
plugins: [
alias([
// `replacement` is recommented to use absolute path,
// it will be automatically calculated as relative path.
{ find: '@', replacement: path.join(__dirname, 'src') },
]),
copy([
// filename, glob
{ from: 'foo/*.ext', to: 'dest' },
]),
// Dynamic change the build dist path.
dest((_from, to) => to?.replace('dist-electron', 'dist-other')),
customStart(({ startup }) => {
// If you want to control the launch of Electron App yourself.
startup()
}),
// Support use ESM npm-package in Electron-Main.
esmodule({
// e.g. `execa`, `node-fetch`, `got`, etc.
include: ['execa', 'node-fetch', 'got'],
}),
// https://vitejs.dev/guide/env-and-mode.html#env-files
// Support use `import.meta.env.VITE_SOME_KEY` in Electron-Main
loadViteEnv(),
],
}),
],
}
import {
type Configuration,
type ResolvedConfig,
type Plugin,
build,
watch,
startup,
defineConfig,
default as electron,
} from 'vite-electron-plugin'
Example
// dev
watch({
include: [
// The Electron source codes directory
'electron',
],
plugins: [
{
name: 'plugin-electron-startup',
ondone() {
// Startup Electron App
startup()
},
},
],
})
// build
build({
include: ['electron'],
})
0.8.3 (2023-12-03)
acornOptions
for #59FAQs
High-performance, esbuild-based Vite Electron plugin
The npm package vite-electron-plugin receives a total of 434 weekly downloads. As such, vite-electron-plugin popularity was classified as not popular.
We found that vite-electron-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.Ā It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.