electron-vite-plus

Electron build tooling powered by Vite+.

Documentation · Getting started · Configuration

Experimental Alpha. This project is independent from Electron, electron-vite, and VoidZero. It is inspired by the workflow of electron-vite and uses the public Vite APIs exported by Vite+.

Why

Vite+ unifies the JavaScript runtime, package manager, formatting, linting, testing, builds, and task caching. Electron additionally needs coordinated builds for its main process, preload scripts, and Chromium renderer. electron-vite-plus connects those two layers.

The Alpha provides:

• one vite.config.ts for Vite+ and Electron;
• Vite+ builds for main, preload, and renderer;
• observable renderer HMR with an optional renderer-only mode;
• coordinated main-process restart and preload reload during development;
• Electron-aware defaults for output formats and external dependencies;
• Electron-aware asset imports and runtime-derived build targets;
• dev, build, preview, smoke, and doctor commands that can be run through vp run.

Create a project

Install the global Vite+ CLI first by following the official installation guide:

curl -fsSL https://vite.plus | bash

On Windows, use the PowerShell installer documented in the guide. Open a new shell and run vp help to confirm the installation, then scaffold the app:

npm create electron-vite-plus@alpha my-app -- --template react
cd my-app
vp install
vp run dev

The project generator includes vanilla, react, and vue templates.

Configuration

// vite.config.ts
import { defineConfig } from "electron-vite-plus";

export default defineConfig({
  // Standard Vite plugins and options are inherited by the renderer.
  plugins: [],
  electron: {
    main: {
      entry: "src/main/index.ts",
    },
    preload: {
      entry: "src/preload/index.ts",
    },
    renderer: {
      root: "src/renderer",
    },
  },

  // Native Vite+ configuration remains in the same file.
  lint: {
    options: {
      typeAware: true,
      typeCheck: true,
    },
  },
  test: {
    include: ["src/**/*.test.ts"],
  },
});

Expected project layout:

src/
├── main/index.ts
├── preload/index.ts
└── renderer/index.html

Add scripts to the Electron application's package.json:

{
  "type": "module",
  "packageManager": "pnpm@10.34.0",
  "main": "./out/main/index.js",
  "scripts": {
    "dev": "electron-vite-plus dev",
    "build": "electron-vite-plus build",
    "doctor": "electron-vite-plus doctor",
    "preview": "electron-vite-plus preview",
    "smoke": "electron-vite-plus smoke"
  },
  "devDependencies": {
    "electron": "^43.4.0",
    "electron-vite-plus": "0.1.0-alpha.2",
    "vite-plus": "0.2.9",
    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.9"
  },
  "pnpm": {
    "overrides": {
      "vite": "npm:@voidzero-dev/vite-plus-core@0.2.9"
    },
    "peerDependencyRules": {
      "allowAny": ["vite"]
    }
  }
}

The exact vite override follows the Vite+ setup and lets renderer plugins resolve the Vite 8 API supplied by Vite+. The peer rule accounts for the independent 0.x version used by the Vite+ core package.

Run it directly or through the Vite+ task runner:

vp run dev
vp check
vp test
vp run build
vp run preview
vp run smoke

Commands

electron-vite-plus [dev] [root]
electron-vite-plus build [root]
electron-vite-plus preview [root]
electron-vite-plus smoke [root]
electron-vite-plus doctor [root]

Use electron-vite-plus --help for all options. evp is provided as a short alias. During HMR diagnosis, run electron-vite-plus dev --debug-hmr. Use --renderer-only when main and preload should be built once and left untouched for a renderer-focused session. --log-level consistently filters the tool, Vite+ targets, and launched Electron output; add --debug when an internal error needs a full stack trace.

Current scope

This Alpha validates the core architecture and is intended for early testing. It does not yet include Electron Forge/electron-builder integration, code signing, worker import conventions, or bytecode protection. Vite+ provides the underlying package-manager rebuild workflow, but native Electron modules do not yet have dedicated integration tests here.

The automated suite covers vanilla, React, and Vue production builds, asset emission, process lifecycle behavior, rebuild recovery, preload reloads, and a main/preload/renderer readiness handshake. CI runs on macOS, Windows, and Linux.