Development Server

The development server provides hot reloading for main process and preload scripts, plus Hot Module Replacement (HMR) for renderer processes, creating a fast development experience.

Capabilities

Create Development Server

Main function to create and start the development server with Electron app integration.

/**
 * Create development server and start Electron app
 * @param inlineConfig - Optional inline configuration overrides
 * @param options - Server creation options
 * @returns Promise that resolves when server starts
 */
function createServer(
  inlineConfig?: InlineConfig,
  options?: { rendererOnly?: boolean }
): 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 { createServer } from "electron-vite";

// Start full development server
await createServer();

// Start with custom config
await createServer({
  mode: 'development',
  logLevel: 'info',
  build: {
    watch: {} // Enable watch mode
  }
});

// Renderer-only mode for UI development
await createServer({}, { rendererOnly: true });

Development Features

Hot Module Replacement (HMR)

For renderer processes, full HMR support is provided:

// In renderer code - HMR API available
if (import.meta.hot) {
  import.meta.hot.accept('./component.js', (newModule) => {
    // Handle hot update
  });
}

Hot Reloading

Main process and preload scripts support hot reloading:

• Main Process: Automatic restart when main process files change
• Preload Scripts: Reload triggers renderer refresh
• Dependencies: File watching includes imported modules

Development Workflow

1. Server Startup: Development server starts with file watching
2. Electron Launch: Electron app launches automatically
3. File Changes:
   • Renderer changes trigger HMR updates
   • Main/preload changes trigger app restart
   • Config changes restart entire development process

Server Configuration

Development Server Options

Configure the development server behavior:

// In electron.vite.config.js
export default defineConfig({
  main: {
    build: {
      watch: {} // Enable watch mode for main process
    }
  },
  renderer: {
    server: {
      port: 3000,
      host: 'localhost',
      open: false, // Don't open browser
      cors: true,
      hmr: {
        port: 3001
      }
    }
  }
});

Environment Variables

Development server sets these environment variables:

// Available in main process and preload scripts
process.env.ELECTRON_RENDERER_URL // Dev server URL for renderer
process.env.NODE_ENV_ELECTRON_VITE // Set to 'development'

Debugging Support

Inspector Support

Enable Node.js inspector for main process debugging:

# Enable V8 inspector
electron-vite dev --inspect

# Enable inspector with break on start
electron-vite dev --inspectBrk

# Custom inspector port
electron-vite dev --inspect=9229

Remote Debugging

Enable remote debugging for renderer processes:

# Enable remote debugging port
electron-vite dev --remoteDebuggingPort=9222

Sandbox Control

Control renderer process sandboxing during development:

# Disable sandbox for debugging
electron-vite dev --noSandbox

File Watching

Watch Patterns

The development server watches these file patterns:

• Main Process: All files imported by main entry point
• Preload Scripts: All files imported by preload entry points
• Renderer: All files in renderer source directory
• Configuration: electron.vite.config.* files
• Package Files: package.json for dependency changes

Watch Configuration

Configure file watching behavior:

{
  main: {
    build: {
      watch: {
        exclude: ['node_modules/**', 'dist/**'],
        include: ['src/main/**/*.ts']
      }
    }
  }
}

Error Handling

Development Error Display

Errors are displayed both in:

• Console: Terminal output with stack traces
• Electron DevTools: For renderer errors
• Main Process: Error overlays and notifications

Common Development Issues

• Port Conflicts: Automatic port selection if default ports occupied
• File Permission: Clear error messages for file access issues
• Module Resolution: Detailed import resolution error reporting
• TypeScript Errors: Real-time type checking with error display

Performance Optimization

Fast Refresh

• Renderer HMR: Sub-second update times for UI changes
• Main Process: Fast restart using watch mode compilation
• Asset Loading: Efficient asset serving with caching

Memory Management

• File Watching: Efficient file system monitoring
• Hot Reloading: Memory cleanup on process restart
• Cache Management: Development build cache optimization