alex8088/electron-vite

Next generation Electron build tooling based on Vite. This is what I'm using for snipe right now, since it uses vite, and ts and react.

Summary

electron-vite is a build tool for Electron applications built on top of Vite. It ships pre-configured defaults for Electron's main process, preload scripts, and renderer, and includes a way to compile main process code to V8 bytecode for source code protection. The project is written in TypeScript and released under the MIT license.

What it is useful for

The tool targets engineers building Electron apps who want Vite's developer workflow without hand-rolling the multi-process configuration. Its three-section config covers main, preload, and renderer separately, which matches Electron's process model and is useful for any app with multiple entries. The README lists fast HMR and hot reloading, isolated builds for multi-entry applications, and simplified multi-threading (linked to the node-worker topic) as core features. The V8 bytecode compile step is positioned as the project's approach to source code protection. Out-of-the-box support covers TypeScript, Vue, React, Svelte, and SolidJS, in both plain JavaScript and TypeScript variants, so picking a frontend stack does not require extra setup.

How engineers can use it

For an existing project, the README documents installing the package as a dev dependency and adding three npm scripts that call the electron-vite binary:

npm i electron-vite -D

"start": "electron-vite preview"
"dev": "electron-vite dev"
"prebuild": "electron-vite build"

Configuration lives in electron.vite.config.js at the project root. The minimal example in the README shows three keys (main, preload, renderer), each accepting standard Vite config options.

For a new project, the README points to a boilerplate repository and a scaffolder:

npm create @quick-start/electron@latest

Template presets listed in the README include vanilla, vue, react, svelte, and solid, each with a TypeScript counterpart (vanilla-ts, vue-ts, react-ts, svelte-ts, solid-ts).

The README is light on advanced options such as bytecode compilation flags, worker thread wiring, or the typescript-decorator topic, so engineers needing those specifics will need to consult the linked documentation or the contributing guide.