0PricingLogin
React Academy · Lesson

Setting Up React with Electron

Configure Electron with Vite and React, set up contextBridge for secure IPC, and run in development mode.

Project Setup Overview

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.

The main.js File

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.

All lessons in this course

  1. Electron Architecture: Main and Renderer Processes
  2. Setting Up React with Electron
  3. IPC Communication Between Processes
  4. Packaging and Distribution for Desktop Platforms
← Back to React Academy