React instellen met Electron

Een React-project met Electron opzetten begint met het maken van een Vite React-project en vervolgens het toevoegen van electron en electron-builder als ontwikkelingsafhankelijkheden. Het project krijgt uiteindelijk twee toegangspunten: de Vite-app voor het rendererproces en een main.js-bestand voor het hoofdproces van Electron.

main.js is het toegangspunt van Electron. Het maakt een BrowserWindow met de gewenste vensterafmetingen en beveiligingsinstellingen en laadt vervolgens de React-app — tijdens de ontwikkeling verwijzend naar localhost:5173 en in productie naar een gebouwd bestandspad.

electron-vite is een alles-in-één bouwprogramma dat Vite met Electron integreert en automatisch de complexe configuratie voor compilaties met meerdere processen afhandelt. Het biedt afzonderlijke Vite-configuraties voor het hoofdproces, preload en renderer en vereenvoudigt zowel ontwikkel- als productiecompilaties aanzienlijk.

Bij het configureren van Vite voor Electron moet je expliciete browserdoelen instellen in plaats van op automatische detectie te vertrouwen, omdat de renderer op een specifieke Chromium-versie draait die in Electron is ingebouwd. electron-vite doet dit automatisch, maar bij handmatige configuraties moet je de Chrome-versie in het compilatiedoel opgeven.

Het uitvoeren van electron-vite dev start tegelijk de Vite-ontwikkelserver voor de renderer en het hoofdproces van Electron. De Vite-ontwikkelserver biedt directe modulevervanging, zodat wijzigingen in je React-componenten onmiddellijk in het Electron-venster zichtbaar worden zonder volledige herstart.

HMR werkt in de Electron-renderer net als in een browser — bewerkte componenten worden onmiddellijk opnieuw weergegeven terwijl hun status behouden blijft. Alleen wijzigingen in main.js of het preloadscript vereisen een volledige herstart van Electron, omdat deze buiten de HMR-grens van Vite worden uitgevoerd.

Electron + React + TypeScript-projecten hebben afzonderlijke tsconfig-bestanden nodig voor het hoofdproces (gericht op Node.js/CommonJS), preload (gericht op een browserachtige omgeving met globale Node-variabelen) en renderer (standaardbrowser-TypeScript). electron-vite maakt deze configuraties automatisch aan.

Het preloadscript gebruikt contextBridge.exposeInMainWorld om je aangepaste API beschikbaar te stellen aan het rendererproces. Een gebruikelijk patroon is het beschikbaar stellen van een naamruimte zoals "api" met functies die aanroepen van ipcRenderer.invoke omwikkelen, zodat React-componenten een nette asynchrone interface naar bewerkingen in het hoofdproces krijgen.

Vanuit elke React-component roep je window.api.myFunction() aan om de blootgestelde preload-API aan te roepen. TypeScript-gebruikers voegen doorgaans een globale declaratie toe (window: Window & { api: MyAPI }) zodat ze typecontrole en automatisch aanvullen krijgen voor de blootgestelde interface.

electron-vite build compileert alle drie de doelen (hoofdproces, preload, renderer) naar de map dist/. electron-builder verpakt dit vervolgens in een platformgericht installatieprogramma. De productieversie van main.js laadt de renderer vanaf het gebundelde bestandspad in plaats van vanaf de URL van de ontwikkelserver.

De meest voorkomende configuratiefouten zijn: nodeIntegration:false en contextIsolation:true vergeten (waardoor beveiligingslekken ontstaan), de verkeerde URL laden in main.js (ontwikkeling versus productie) en Electron-modules rechtstreeks in de renderer importeren (waardoor vastlopers ontstaan). De standaardinstellingen van electron-vite voorkomen de meeste van deze problemen.

Een React-project met Electron opzetten wordt vereenvoudigd door electron-vite, dat de complexiteit van compilaties met meerdere processen afhandelt. De ontwikkelworkflow biedt volledige ondersteuning voor HMR, contextBridge beveiligt het API-oppervlak van de renderer en afzonderlijke TypeScript-configuraties zorgen ervoor dat elk proces de juiste typeomgeving heeft. Productiecompilaties gebruiken electron-builder voor platformgerichte verpakking.