or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-system.mdcli-reference.mdconfiguration.mddevelopment-server.mdindex.mdplugins.mdpreview-mode.mdtype-definitions.mdutilities.md
tile.json

index.mddocs/

Electron Vite

Electron Vite is a next-generation build tooling solution for Electron applications that leverages Vite's fast development server and build capabilities. It provides pre-configured development environments for main process, preload scripts, and renderer processes with features like hot module replacement (HMR), hot reloading, TypeScript support, and asset optimization for Node.js addons and WebAssembly.

Package Information

  • Package Name: electron-vite
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install electron-vite -D

Core Imports

import { defineConfig, build, createServer, preview, loadEnv } from "electron-vite";
import { bytecodePlugin, externalizeDepsPlugin, swcPlugin } from "electron-vite";
import { createLogger, mergeConfig, type LogLevel } from "electron-vite";

For CommonJS:

const { defineConfig, build, createServer, preview, loadEnv } = require("electron-vite");
const { bytecodePlugin, externalizeDepsPlugin, swcPlugin } = require("electron-vite");
const { createLogger, mergeConfig } = require("electron-vite");

Basic Usage

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

export default defineConfig({
  main: {
    build: {
      outDir: "dist/main"
    }
  },
  preload: {
    build: {
      outDir: "dist/preload"
    }
  },
  renderer: {
    root: resolve(__dirname, "src/renderer"),
    build: {
      outDir: "dist/renderer"
    }
  }
});

Command line usage:

# Development
electron-vite dev

# Production build
electron-vite build

# Preview production build
electron-vite preview

Architecture

Electron Vite is built around several key components:

  • Configuration System: Multi-process configuration supporting main, preload, and renderer processes
  • Development Server: Vite-powered dev server with HMR for renderers and hot reloading for main/preload
  • Build System: Production build orchestration for all Electron processes
  • Plugin System: Specialized plugins for Electron-specific needs (bytecode, externalization, asset handling)
  • CLI Interface: Command-line tool with development, build, and preview commands
  • Type Definitions: Full TypeScript support with Electron-specific module declarations

Capabilities

Configuration

Configuration system for defining Vite settings for each Electron process (main, preload, renderer) with TypeScript support and helper functions.

function defineConfig(config: ElectronViteConfig): ElectronViteConfig;

interface ElectronViteConfig {
  main?: ViteConfigExport;
  preload?: ViteConfigExport; 
  renderer?: ViteConfigExport;
}

interface UserConfig {
  main?: ViteConfig & { configFile?: string | false };
  renderer?: ViteConfig & { configFile?: string | false };
  preload?: ViteConfig & { configFile?: string | false };
}

Configuration

Build System

Production build functionality that compiles all Electron processes (main, preload, renderer) for distribution.

function build(inlineConfig?: InlineConfig): Promise<void>;

type InlineConfig = Omit<ViteConfig, 'base'> & {
  configFile?: string | false;
  envFile?: false;
  ignoreConfigWarning?: boolean;
};

Build System

Development Server

Development server that provides hot reloading for main process and preload scripts, plus HMR for renderer processes.

function createServer(
  inlineConfig?: InlineConfig, 
  options?: { rendererOnly?: boolean }
): Promise<void>;

Development Server

Preview Mode

Preview functionality for testing production builds locally before distribution.

function preview(
  inlineConfig?: InlineConfig,
  options?: { skipBuild?: boolean }
): Promise<void>;

Preview Mode

Plugins

Specialized plugins for Electron development including bytecode compilation, dependency externalization, and SWC transformer support.

function bytecodePlugin(options?: BytecodeOptions): Plugin | null;
function externalizeDepsPlugin(options?: ExternalOptions): Plugin | null; 
function swcPlugin(options?: SwcOptions): Plugin;

interface BytecodeOptions {
  chunkAlias?: string | string[];
  transformArrowFunctions?: boolean;
  removeBundleJS?: boolean;
  protectedStrings?: string[];
}

interface ExternalOptions {
  exclude?: string[];
  include?: string[];
}

interface SwcOptions {
  include?: FilterPattern;
  exclude?: FilterPattern;
  transformOptions?: TransformConfig;
}

Plugins

Utilities

Utility functions for environment loading and configuration support.

function loadEnv(
  mode: string,
  envDir?: string,
  prefixes?: string | string[]
): Record<string, string>;

Utilities

CLI Commands

The electron-vite CLI provides three main commands:

  • electron-vite [root] / dev / serve - Start development server
  • electron-vite build [root] - Build for production
  • electron-vite preview [root] - Preview production build

CLI Reference

Type Definitions

Custom type definitions for Electron-specific module patterns and imports.

// Module declarations for special imports
declare module '*?nodeWorker' {
  import { Worker, WorkerOptions } from 'node:worker_threads';
  export default function (options: WorkerOptions): Worker;
}

declare module '*?modulePath' {
  const src: string;
  export default src;
}

declare module '*?asset' {
  const src: string;
  export default src;
}

// Process environment extensions  
declare namespace NodeJS {
  interface ProcessEnv {
    readonly ELECTRON_RENDERER_URL?: string;
  }
}

Type Definitions