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

build-system.mddocs/

Build System

The build system provides production build functionality that compiles all Electron processes (main, preload, renderer) for distribution with optimizations and asset handling.

Capabilities

Build Function

Main build function that orchestrates the production build process for all configured Electron processes.

/**
 * Bundles the electron app for production
 * @param inlineConfig - Optional inline configuration overrides
 * @returns Promise that resolves when build completes
 */
function build(inlineConfig?: InlineConfig): Promise<void>;

type InlineConfig = Omit<ViteConfig, 'base'> & {
  /** Path to config file or false to disable */
  configFile?: string | false;
  /** Disable .env file loading */
  envFile?: false;
  /** Ignore configuration warnings */
  ignoreConfigWarning?: boolean;
};

Usage Examples:

import { build } from "electron-vite";

// Basic build
await build();

// Build with inline configuration
await build({
  mode: 'production',
  build: {
    outDir: 'custom-dist',
    sourcemap: true
  }
});

// Build with custom config file
await build({
  configFile: 'electron.vite.production.config.js'
});

Build Process

The build system follows this sequence:

  1. Configuration Resolution: Loads and resolves the electron.vite.config file
  2. Main Process Build: Compiles the main process code with Node.js targeting
  3. Preload Scripts Build: Compiles preload scripts with appropriate externalization
  4. Renderer Process Build: Compiles renderer code with web targeting and optimizations
  5. Asset Processing: Handles assets, native modules, and WebAssembly files
  6. Output Generation: Creates final distribution files in the configured output directory

Build Configuration

Output Directory Structure

Default output structure:

out/
├── main/           # Main process output
│   └── index.js
├── preload/        # Preload scripts output
│   └── index.js
└── renderer/       # Renderer process output
    ├── index.html
    └── assets/

Build Options

Common build configuration options:

// In electron.vite.config.js
export default defineConfig({
  main: {
    build: {
      outDir: 'dist/main',
      minify: true,
      sourcemap: false,
      rollupOptions: {
        external: ['electron', 'node:*']
      }
    }
  },
  preload: {
    build: {
      outDir: 'dist/preload',
      lib: {
        entry: 'src/preload/index.ts',
        formats: ['cjs']
      }
    }
  },
  renderer: {
    build: {
      outDir: 'dist/renderer',
      rollupOptions: {
        input: {
          main: 'src/renderer/index.html'
        }
      }
    }
  }
});

Asset Handling

Node.js Addons

Native Node.js modules are automatically handled:

// Automatically resolved with ?asset suffix
import addonPath from './native-addon.node?asset';

WebAssembly Support

WebAssembly modules with loader support:

// WASM with loader
import loadWasm from './module.wasm?loader';

const wasmInstance = await loadWasm();

Worker Threads

Node.js worker thread support:

// Worker thread module
import WorkerConstructor from './worker.js?nodeWorker';

const worker = new WorkerConstructor({ 
  workerData: { /* data */ } 
});

Environment Variables

Build-time environment variable handling:

// In your code
const isDev = process.env.NODE_ENV === 'development';
const apiUrl = process.env.VITE_API_URL;

// Electron-specific environment variables
const rendererUrl = process.env.ELECTRON_RENDERER_URL; // Dev server URL

Build Optimization

Code Splitting

Automatic code splitting for renderer process:

// Lazy loading in renderer
const Component = lazy(() => import('./components/HeavyComponent'));

Tree Shaking

Dead code elimination is enabled by default for all processes.

Minification

Production builds are minified using esbuild by default:

{
  build: {
    minify: 'esbuild', // or 'terser' for more aggressive minification
    terserOptions: {
      // Terser-specific options
    }
  }
}

Error Handling

Build process includes comprehensive error handling:

  • Configuration Errors: Invalid config file syntax or missing required options
  • Compilation Errors: TypeScript type errors, import resolution failures
  • Asset Errors: Missing assets, invalid native modules
  • Output Errors: File system permission issues, disk space problems

Build errors are logged with detailed context information and stack traces for debugging.