React mit Electron einrichten

Die Einrichtung von React mit Electron beginnt mit der Erstellung eines Vite-React-Projekts und dem anschließenden Hinzufügen von electron und electron-builder als devDependencies. Das Projekt hat schließlich zwei Einstiegspunkte: die Vite-App für den Renderer und eine main.js-Datei für den Electron-Hauptprozess.

main.js ist der Einstiegspunkt von Electron. Es erstellt ein BrowserWindow mit den gewünschten Fensterabmessungen und Sicherheitseinstellungen und lädt anschließend die React-App – während der Entwicklung über localhost:5173 und in der Produktion über einen Pfad zu einer Build-Datei.

electron-vite ist ein All-in-one-Build-Tool, das Vite in Electron integriert und die komplexe Build-Konfiguration für mehrere Prozesse automatisch übernimmt. Es stellt separate Vite-Konfigurationen für main, preload und renderer bereit und vereinfacht sowohl Entwicklungs- als auch Produktions-Builds erheblich.

Beim Konfigurieren von Vite für Electron müssen Sie explizite Browser-Ziele festlegen, statt sich auf automatische Erkennung zu verlassen, da der Renderer in einer bestimmten, mit Electron gebündelten Chromium-Version ausgeführt wird. electron-vite erledigt dies automatisch; bei manuellen Setups müssen Sie jedoch die Chrome-Version im Build-Ziel angeben.

Das Ausführen von electron-vite dev startet gleichzeitig den Vite-Entwicklungsserver für den Renderer und den Electron-Hauptprozess. Der Vite-Entwicklungsserver stellt Hot Module Replacement bereit, sodass Änderungen an Ihren React-Komponenten sofort im Electron-Fenster erscheinen, ohne dass ein vollständiger Neustart erforderlich ist.

HMR funktioniert im Electron-Renderer genauso wie in einem Browser – bearbeitete Komponenten werden sofort neu gerendert, während ihr State erhalten bleibt. Nur Änderungen an main.js oder am Preload-Skript erfordern einen vollständigen Neustart von Electron, da diese außerhalb der Vite-HMR-Grenze ausgeführt werden.

Electron- + React- + TypeScript-Projekte benötigen separate tsconfig-Dateien für main (mit Node.js/CommonJS als Ziel), preload (für eine browserähnliche Umgebung mit Node-Globals) und renderer (standardmäßiges Browser-TypeScript). electron-vite erstellt diese Konfigurationen automatisch.

Das Preload-Skript verwendet contextBridge.exposeInMainWorld, um Ihre benutzerdefinierte API für den Renderer freizugeben. Ein typisches Muster ist die Bereitstellung eines Namensraums wie "api" mit Funktionen, die Aufrufe von ipcRenderer.invoke kapseln und React-Komponenten eine übersichtliche asynchrone Schnittstelle für Operationen im Hauptprozess geben.

In jeder React-Komponente rufen Sie window.api.myFunction() auf, um die freigegebene Preload-API aufzurufen. TypeScript-Nutzer fügen typischerweise eine globale Deklaration hinzu (window: Window & { api: MyAPI }), damit sie für die freigegebene Schnittstelle Typprüfung und Autovervollständigung erhalten.

electron-vite build kompiliert alle drei Ziele (main, preload, renderer) in den dist/-Ordner. electron-builder verpackt diese anschließend in ein plattformspezifisches Installationsprogramm. Die Produktionsversion von main.js lädt den Renderer aus dem gebündelten Dateipfad statt über die URL des Entwicklungsservers.

Die häufigsten Fehler bei der Einrichtung sind: nodeIntegration:false und contextIsolation:true zu vergessen (wodurch Sicherheitslücken entstehen), in main.js die falsche URL zu laden (Entwicklung statt Produktion oder umgekehrt) und Electron-Module direkt im Renderer zu importieren (was zu Abstürzen führt). Die Standardeinstellungen von electron-vite verhindern die meisten dieser Probleme.

Was bewirkt das Ausführen von electron-vite dev?

Die Einrichtung von React mit Electron wird durch electron-vite vereinfacht, das die Komplexität des Multi-Process-Builds übernimmt. Der Entwicklungs-Workflow bietet vollständige HMR-Unterstützung, contextBridge sichert die Renderer-API-Oberfläche ab, und separate TypeScript-Konfigurationen stellen sicher, dass jeder Prozess über die richtige Typumgebung verfügt. Produktions-Builds verwenden electron-builder für die plattformspezifische Paketierung.