Configurer React avec Electron

La configuration de React avec Electron commence par la création d'un projet React avec Vite, puis par l'ajout d'electron et d'electron-builder comme devDependencies. Le projet comporte finalement deux points d'entrée : l'application Vite pour le processus de rendu et un fichier main.js pour le processus principal d'Electron.

main.js est le point d'entrée d'Electron. Il crée un BrowserWindow avec les dimensions et les paramètres de sécurité souhaités, puis charge l'application React : il pointe vers localhost:5173 pendant le développement et vers un chemin de fichier compilé en production.

electron-vite est un outil de compilation tout-en-un qui intègre Vite à Electron et gère automatiquement la configuration complexe d'une compilation multiprocessus. Il fournit des configurations Vite distinctes pour le processus principal, le préchargement et le rendu, et simplifie considérablement les compilations de développement comme de production.

Lors de la configuration de Vite pour Electron, vous devez définir explicitement les cibles de navigateur plutôt que de vous fier à la détection automatique, car le processus de rendu s'exécute dans une version précise de Chromium intégrée à Electron. electron-vite s'en charge automatiquement, mais les configurations manuelles doivent préciser la version de Chrome dans la cible de compilation.

L'exécution de electron-vite dev démarre simultanément le serveur de développement Vite pour le processus de rendu et le processus principal d'Electron. Le serveur de développement Vite fournit le remplacement de module à chaud (HMR) : les changements apportés à vos composants React apparaissent instantanément dans la fenêtre Electron, sans redémarrage complet.

Dans le processus de rendu Electron, HMR fonctionne comme dans un navigateur : les composants modifiés sont rendus de nouveau instantanément tout en conservant leur état. Seuls les changements apportés à main.js ou au script de préchargement nécessitent un redémarrage complet d'Electron, car ces éléments s'exécutent en dehors de la portée de HMR de Vite.

Les projets Electron + React + TypeScript ont besoin de fichiers tsconfig distincts pour le processus principal, qui cible Node.js/CommonJS, le préchargement, qui cible un environnement similaire à celui d'un navigateur avec les variables globales de Node, et le rendu, qui utilise le TypeScript standard pour navigateur. electron-vite génère automatiquement ces configurations.

Le script de préchargement utilise contextBridge.exposeInMainWorld pour exposer votre API personnalisée au processus de rendu. Un modèle courant consiste à exposer un espace de noms tel que "api", avec des fonctions qui encapsulent les appels à ipcRenderer.invoke, afin de fournir aux composants React une interface asynchrone claire pour les opérations du processus principal.

Depuis n'importe quel composant React, vous appelez window.api.myFunction() pour invoquer l'API exposée par le script de préchargement. Les utilisateurs de TypeScript ajoutent généralement une déclaration globale (window: Window & { api: MyAPI }) afin de bénéficier de la vérification des types et de l'autocomplétion pour l'interface exposée.

electron-vite build compile les trois cibles, à savoir le processus principal, le préchargement et le rendu, dans le dossier dist/. electron-builder transforme ensuite ce résultat en programme d'installation propre à la plateforme. En production, main.js charge le processus de rendu depuis le chemin du fichier regroupé plutôt que depuis l'URL du serveur de développement.

Les erreurs de configuration les plus fréquentes sont les suivantes : oublier nodeIntegration:false et contextIsolation:true, ce qui crée des failles de sécurité ; charger la mauvaise URL dans main.js, entre développement et production ; et importer directement des modules Electron dans le processus de rendu, ce qui provoque des plantages. Les valeurs par défaut d'electron-vite évitent la plupart de ces problèmes.

Que permet l'exécution de electron-vite dev ?

La configuration de React avec Electron est simplifiée par electron-vite, qui gère la complexité de la compilation multiprocessus. Le flux de développement fournit une prise en charge complète de HMR, contextBridge sécurise la surface d'API du processus de rendu et des configurations TypeScript distinctes garantissent à chaque processus l'environnement de types approprié. Les compilations de production utilisent electron-builder pour créer des packages propres à chaque plateforme.