Configurazione di React con Electron

Configurare React con Electron inizia dalla creazione di un progetto React Vite, quindi dall'aggiunta di electron ed electron-builder come devDependencies. Il progetto finisce per avere due punti di ingresso: l'app Vite per il renderer e un file main.js per il processo principale di Electron.

main.js è il punto di ingresso di Electron. Crea un BrowserWindow con le dimensioni della finestra e le impostazioni di sicurezza desiderate, quindi carica l'app React: durante lo sviluppo punta a localhost:5173, mentre in produzione punta a un percorso del file compilato.

electron-vite è uno strumento di build completo che integra Vite con Electron e gestisce automaticamente la complessa configurazione delle build multiprocesso. Fornisce configurazioni Vite separate per main, preload e renderer e semplifica notevolmente le build sia di sviluppo sia di produzione.

Quando configura Vite per Electron, deve impostare target espliciti per il browser invece di affidarsi al rilevamento automatico, poiché il renderer viene eseguito in una versione specifica di Chromium inclusa in Electron. electron-vite gestisce automaticamente questo aspetto, ma le configurazioni manuali richiedono di specificare la versione di chrome nella destinazione della build.

L'esecuzione di electron-vite dev avvia contemporaneamente il server di sviluppo Vite per il renderer e il processo principale di Electron. Il server di sviluppo Vite fornisce l'Hot Module Replacement, quindi le modifiche ai componenti React vengono visualizzate immediatamente nella finestra Electron senza un riavvio completo.

HMR funziona nel renderer Electron proprio come in un browser: i componenti modificati vengono nuovamente renderizzati all'istante, mantenendo lo stato. Solo le modifiche a main.js o allo script di preload richiedono un riavvio completo di Electron, poiché questi elementi vengono eseguiti al di fuori del confine HMR di Vite.

I progetti Electron + React + TypeScript richiedono file tsconfig separati per main (con target Node.js/CommonJS), preload (con target di un ambiente simile a un browser e con le variabili globali di Node) e renderer (TypeScript standard per il browser). electron-vite predispone automaticamente queste configurazioni.

Lo script di preload utilizza contextBridge.exposeInMainWorld per esporre la propria API personalizzata al renderer. Un pattern tipico consiste nell'esporre uno spazio dei nomi come "api" con funzioni che racchiudono le chiamate a ipcRenderer.invoke, offrendo ai componenti React un'interfaccia asincrona chiara per le operazioni del processo principale.

Da qualsiasi componente React, chiami window.api.myFunction() per invocare l'API del preload esposta. Chi utilizza TypeScript aggiunge in genere una dichiarazione globale (window: Window & { api: MyAPI }) per ottenere il controllo dei tipi e il completamento automatico dell'interfaccia esposta.

electron-vite build compila tutti e tre i target (main, preload, renderer) nella cartella dist/. electron-builder li impacchetta quindi in un installer specifico per la piattaforma. In produzione, main.js carica il renderer dal percorso del file incluso nel pacchetto anziché dall'URL del server di sviluppo.

Gli errori di configurazione più frequenti sono: dimenticare nodeIntegration:false e contextIsolation:true (creando falle di sicurezza), caricare l'URL sbagliato in main.js (sviluppo invece di produzione o viceversa) e importare direttamente i moduli Electron nel renderer (causando arresti anomali). Le impostazioni predefinite di electron-vite prevengono la maggior parte di questi problemi.

Che cosa si ottiene eseguendo electron-vite dev?

La configurazione di React con Electron è semplificata da electron-vite, che gestisce la complessità delle build multiprocesso. Il flusso di sviluppo offre il pieno supporto HMR, contextBridge protegge la superficie dell'API del renderer e configurazioni TypeScript separate garantiscono a ogni processo l'ambiente di tipi corretto. Le build di produzione utilizzano electron-builder per la creazione di pacchetti specifici per la piattaforma.