Menyiapkan React dengan Electron

Penyiapan React dengan Electron dimulai dengan membuat proyek React Vite, lalu menambahkan electron dan electron-builder sebagai devDependencies. Pada akhirnya, proyek memiliki dua titik masuk: aplikasi Vite untuk proses perender dan berkas main.js untuk proses utama Electron.

main.js adalah titik masuk Electron. Berkas ini membuat BrowserWindow dengan dimensi jendela dan pengaturan keamanan yang Anda inginkan, lalu memuat aplikasi React — dengan mengarah ke localhost:5173 selama pengembangan dan ke jalur berkas hasil kompilasi dalam produksi.

electron-vite adalah alat kompilasi lengkap yang mengintegrasikan Vite dengan Electron dan secara otomatis menangani konfigurasi kompilasi multiproses yang kompleks. Alat ini menyediakan konfigurasi Vite terpisah untuk proses utama, pramuat, dan perender, serta sangat menyederhanakan kompilasi untuk pengembangan maupun produksi.

Saat mengonfigurasi Vite untuk Electron, Anda harus menetapkan target peramban secara eksplisit, bukan mengandalkan deteksi otomatis, karena proses perender berjalan pada versi Chromium tertentu yang disertakan dalam Electron. electron-vite menangani hal ini secara otomatis, tetapi penyiapan manual mengharuskan Anda menentukan versi chrome dalam target kompilasi.

Menjalankan electron-vite dev akan memulai server pengembangan Vite untuk proses perender dan proses utama Electron secara bersamaan. Server pengembangan Vite menyediakan Hot Module Replacement, sehingga perubahan pada komponen React langsung terlihat di jendela Electron tanpa perlu memulai ulang seluruh aplikasi.

HMR bekerja di proses perender Electron seperti di peramban — komponen yang diedit langsung dirender ulang dengan tetap mempertahankan status. Hanya perubahan pada main.js atau skrip pramuat yang memerlukan mulai ulang penuh Electron, karena keduanya berjalan di luar batas HMR Vite.

Proyek Electron + React + TypeScript memerlukan berkas tsconfig terpisah untuk proses utama (menargetkan Node.js/CommonJS), pramuat (menargetkan lingkungan mirip peramban dengan global Node), dan perender (TypeScript peramban standar). electron-vite membuat konfigurasi ini secara otomatis.

Skrip pramuat menggunakan contextBridge.exposeInMainWorld untuk mengekspos API khusus Anda kepada proses perender. Pola yang umum adalah mengekspos ruang nama seperti "api" dengan fungsi yang membungkus pemanggilan ipcRenderer.invoke, sehingga komponen React memperoleh antarmuka asinkron yang bersih untuk operasi pada proses utama.

Dari komponen React mana pun, Anda dapat memanggil window.api.myFunction() untuk menggunakan API pramuat yang diekspos. Pengguna TypeScript biasanya menambahkan deklarasi global (window: Window & { api: MyAPI }) agar pemeriksaan tipe dan pelengkapan otomatis tersedia untuk antarmuka yang diekspos.

electron-vite build mengompilasi ketiga target (utama, pramuat, perender) ke dalam folder dist/. Setelah itu, electron-builder mengemasnya menjadi penginstal khusus platform. main.js dalam produksi memuat proses perender dari jalur berkas yang dikemas, bukan dari URL server pengembangan.

Kesalahan penyiapan yang paling sering terjadi adalah: lupa menonaktifkan nodeIntegration:false dan mengaktifkan contextIsolation:true (sehingga menciptakan celah keamanan), memuat URL yang salah di main.js (pengembangan atau produksi), dan mengimpor modul Electron secara langsung di proses perender (sehingga menyebabkan kerusakan). Bawaan electron-vite mencegah sebagian besar masalah ini.

Apa yang dilakukan saat menjalankan electron-vite dev?

Penyiapan React dengan Electron disederhanakan oleh electron-vite, yang menangani kompleksitas kompilasi multiproses. Alur kerja pengembangan menyediakan dukungan HMR penuh, contextBridge mengamankan permukaan API proses perender, dan konfigurasi TypeScript terpisah memastikan setiap proses memiliki lingkungan tipe yang tepat. Kompilasi produksi menggunakan electron-builder untuk pengemasan khusus platform.