electron-vite — Fast Vite-Powered Build Tooling for Electron

Introduction

electron-vite integrates Vite into the Electron development workflow, replacing slower Webpack-based setups with near-instant hot module replacement for both the renderer and main processes. It understands the unique requirements of Electron apps — separate entry points for main, preload, and renderer — and handles them with a single unified configuration.

What electron-vite Does

• Provides a unified Vite config that compiles main process, preload scripts, and renderer simultaneously
• Delivers sub-second hot module replacement in the renderer process during development
• Handles main process restarts automatically when backend code changes
• Supports TypeScript, React, Vue, Svelte, and Solid out of the box with zero extra configuration
• Bundles the final application with optimized code splitting and tree shaking

Architecture Overview

electron-vite runs three Vite instances in parallel: one for the main process (targeting Node.js), one for preload scripts (targeting Electron's sandboxed preload context), and one for the renderer (targeting the browser). A custom dev server coordinates these instances, watching for changes and applying HMR to the renderer or restarting the main process as needed. The build step produces optimized bundles for each target with proper externalization of Electron and Node.js built-in modules.

Self-Hosting & Configuration

• Scaffold a new project with the official create template or add electron-vite to an existing Electron app
• Configure all three targets in a single electron.vite.config.ts file
• Set Electron and Node.js module externals automatically without manual configuration
• Use environment variables and .env files with Vite's standard import.meta.env pattern
• Pair with electron-builder or @electron-forge for packaging and distribution

Key Features

• Development startup in under 1 second compared to 10-30 seconds with Webpack-based setups
• Hot module replacement that preserves component state in the renderer process
• Automatic main process restart without closing and reopening the Electron window
• First-class TypeScript support with path aliases resolved across all three targets
• Asset handling with automatic URL resolution between main and renderer processes

Comparison with Similar Tools

• Electron Forge is Electron's official build tool but uses Webpack; electron-vite replaces the bundler with Vite
• Vite alone does not understand Electron's multi-process architecture; electron-vite adds the necessary orchestration
• electron-builder handles packaging and distribution; electron-vite handles development and bundling, and the two work together
• Webpack with electron-webpack provides similar functionality but with significantly slower build and HMR times
• Tauri avoids Electron entirely using system webviews; electron-vite optimizes the Electron development experience

FAQ

Q: Can I migrate an existing Webpack-based Electron project? A: Yes. Replace your Webpack config with electron.vite.config.ts and update your package.json scripts. Most Vite plugins work without modification.

Q: Does electron-vite work with Electron Forge? A: Yes. electron-vite can be used as the bundler within an Electron Forge workflow by using the Vite plugin for Forge.

Q: What Node.js and Electron versions are required? A: electron-vite requires Node.js 18+ and supports Electron 13 and newer. Using the latest Electron version is recommended.

Q: Does HMR work in the main process? A: The main process does not support HMR due to Electron's architecture. Instead, electron-vite performs a fast restart of the main process while keeping the renderer window open.

Sources

• https://github.com/alex8088/electron-vite
• https://electron-vite.org