Setting Up React with Electron

Setting up React with Electron starts with creating a Vite React project, then adding electron and electron-builder as devDependencies. The project ends up with two entry points: the Vite app for the renderer and a main.js file for the Electron main process.

main.js is the Electron entry point. It creates a BrowserWindow with your desired window dimensions and security settings, then loads the React app — pointing to localhost:5173 during development and to a built file path in production.

electron-vite is an all-in-one build tool that integrates Vite with Electron, handling the complex multi-process build configuration automatically. It provides separate Vite configs for main, preload, and renderer, and simplifies both development and production builds significantly.

When configuring Vite for Electron, you must set explicit browser targets rather than relying on auto-detection, because the renderer runs in a specific Chromium version bundled with Electron. electron-vite handles this automatically, but manual setups require specifying the chrome version in the build target.

Running electron-vite dev starts both the Vite development server for the renderer and the Electron main process simultaneously. The Vite dev server provides Hot Module Replacement, so changes to your React components appear instantly in the Electron window without a full restart.

HMR works in the Electron renderer just as it does in a browser — edited components re-render instantly while preserving state. Only changes to main.js or the preload script require a full Electron restart, since those run outside of the Vite HMR boundary.

Electron + React + TypeScript projects need separate tsconfig files for main (targeting Node.js/CommonJS), preload (targeting browser-like environment with Node globals), and renderer (standard browser TypeScript). electron-vite scaffolds these configurations automatically.

The preload script uses contextBridge.exposeInMainWorld to expose your custom API to the renderer. A typical pattern is exposing a namespace like "api" with functions that wrap ipcRenderer.invoke calls, giving React components a clean async interface to main-process operations.

From any React component, you call window.api.myFunction() to invoke the exposed preload API. TypeScript users typically add a global declaration (window: Window & { api: MyAPI }) so they get type checking and autocompletion for the exposed interface.

electron-vite build compiles all three targets (main, preload, renderer) into the dist/ folder. electron-builder then packages this into a platform-specific installer. The production main.js loads the renderer from the bundled file path rather than the dev server URL.

The most frequent setup mistakes are: forgetting nodeIntegration:false and contextIsolation:true (creates security holes), loading the wrong URL in main.js (dev vs prod), and importing Electron modules in the renderer directly (causes crashes). electron-vite defaults prevent most of these issues.

What does running electron-vite dev accomplish?

Setting up React with Electron is streamlined by electron-vite, which handles the multi-process build complexity. The dev workflow gives you full HMR support, contextBridge secures the renderer API surface, and separate TypeScript configurations ensure each process has the correct type environment. Production builds use electron-builder for platform-specific packaging.