Konfiguracja Reacta z Electron

Konfiguracja Reacta z Electronem rozpoczyna się od utworzenia projektu React w Vite, a następnie dodania electron i electron-builder jako devDependencies. Projekt ma ostatecznie dwa punkty wejścia: aplikację Vite dla renderera oraz plik main.js dla procesu głównego Electron.

main.js jest punktem wejścia Electron. Tworzy BrowserWindow z określonymi wymiarami okna i ustawieniami bezpieczeństwa, a następnie ładuje aplikację React — wskazując podczas programowania localhost:5173, a w środowisku produkcyjnym ścieżkę do zbudowanego pliku.

electron-vite to kompleksowe narzędzie do budowania, które integruje Vite z Electronem i automatycznie obsługuje złożoną konfigurację budowania dla wielu procesów. Udostępnia osobne konfiguracje Vite dla main, preload i renderer oraz znacznie upraszcza zarówno kompilacje deweloperskie, jak i produkcyjne.

Podczas konfigurowania Vite dla Electron należy jawnie określić docelowe środowiska przeglądarkowe zamiast polegać na automatycznym wykrywaniu, ponieważ renderer działa w konkretnej wersji Chromium dołączonej do Electron. electron-vite obsługuje to automatycznie, ale w konfiguracji tworzonej ręcznie należy określić wersję chrome w parametrze build target.

Uruchomienie electron-vite dev jednocześnie uruchamia serwer deweloperski Vite dla renderera oraz proces główny Electron. Serwer deweloperski Vite zapewnia Hot Module Replacement, dzięki czemu zmiany w komponentach React pojawiają się natychmiast w oknie Electron bez pełnego restartu.

HMR działa w rendererze Electron tak samo jak w przeglądarce — zmodyfikowane komponenty są natychmiast renderowane ponownie, a ich stan zostaje zachowany. Tylko zmiany w main.js lub skrypcie preload wymagają pełnego ponownego uruchomienia Electron, ponieważ działają poza granicą HMR Vite.

Projekty Electron + React + TypeScript wymagają osobnych plików tsconfig dla main (z docelowym środowiskiem Node.js/CommonJS), preload (z docelowym środowiskiem podobnym do przeglądarkowego i globalnymi obiektami Node) oraz renderer (ze standardowym typowaniem TypeScript dla przeglądarki). electron-vite automatycznie tworzy te konfiguracje.

Skrypt preload używa contextBridge.exposeInMainWorld do udostępnienia niestandardowego API rendererowi. Typowy wzorzec polega na udostępnieniu przestrzeni nazw takiej jak "api" z funkcjami opakowującymi wywołania ipcRenderer.invoke, co zapewnia komponentom React przejrzysty asynchroniczny interfejs do operacji procesu głównego.

Z poziomu dowolnego komponentu React można wywołać window.api.myFunction(), aby użyć udostępnionego API preload. Użytkownicy TypeScript zazwyczaj dodają deklarację globalną (window: Window & { api: MyAPI }), dzięki czemu otrzymują sprawdzanie typów i autouzupełnianie dla udostępnionego interfejsu.

electron-vite build kompiluje wszystkie trzy cele (main, preload, renderer) do folderu dist/. Następnie electron-builder pakuje je do instalatora przeznaczonego dla konkretnej platformy. Produkcyjny main.js ładuje renderer ze ścieżki do spakowanego pliku zamiast z adresu URL serwera deweloperskiego.

Najczęstsze błędy konfiguracji to: pominięcie nodeIntegration:false i contextIsolation:true (co tworzy luki w zabezpieczeniach), załadowanie nieprawidłowego adresu URL w main.js (deweloperskiego zamiast produkcyjnego lub odwrotnie) oraz bezpośrednie importowanie modułów Electron w rendererze (co powoduje awarie). Wartości domyślne electron-vite zapobiegają większości tych problemów.

Co powoduje uruchomienie electron-vite dev?

Konfigurację Reacta z Electronem upraszcza electron-vite, który obsługuje złożoność budowania dla wielu procesów. Proces deweloperski zapewnia pełną obsługę HMR, contextBridge zabezpiecza powierzchnię API renderera, a osobne konfiguracje TypeScript gwarantują właściwe środowisko typów dla każdego procesu. Kompilacje produkcyjne wykorzystują electron-builder do tworzenia pakietów dla konkretnych platform.