React'i Electron ile Kurma

React'ı Electron ile kurmak, bir Vite React projesi oluşturmakla ve ardından electron ile electron-builder'ı devDependencies'e eklemekle başlar. Projenin sonunda iki giriş noktası bulunur: oluşturucu süreç için Vite uygulaması ve Electron ana süreci için main.js dosyası.

main.js, Electron'ın giriş noktasıdır. İstediğiniz pencere boyutları ve güvenlik ayarlarıyla bir BrowserWindow oluşturur, ardından React uygulamasını yükler; geliştirme sırasında localhost:5173 adresini, üretimde ise derlenmiş bir dosya yolunu kullanır.

electron-vite, Vite'ı Electron ile tümleşik hâle getiren ve karmaşık çok süreçli derleme yapılandırmasını otomatik olarak yöneten hepsi bir arada bir derleme aracıdır. Ana süreç, ön yükleme ve oluşturucu süreç için ayrı Vite yapılandırmaları sağlar ve hem geliştirme hem de üretim derlemelerini önemli ölçüde kolaylaştırır.

Electron için Vite'ı yapılandırırken otomatik algılamaya güvenmek yerine açık tarayıcı hedefleri belirlemelisiniz; çünkü oluşturucu süreç, Electron ile birlikte sunulan belirli bir Chromium sürümünde çalışır. electron-vite bunu otomatik olarak yapar, ancak elle yapılan kurulumlarda derleme hedefinde chrome sürümünün belirtilmesi gerekir.

electron-vite dev komutunu çalıştırmak, oluşturucu süreç için Vite geliştirme sunucusunu ve Electron ana sürecini aynı anda başlatır. Vite geliştirme sunucusu Sıcak Modül Değiştirme özelliğini (HMR) sağlar; böylece React bileşenlerinizdeki değişiklikler, tam bir yeniden başlatma olmadan Electron penceresinde anında görünür.

HMR, Electron oluşturucusunda tarayıcıdakiyle aynı şekilde çalışır; düzenlenen bileşenler, durumu koruyarak anında yeniden oluşturulur. Yalnızca main.js veya ön yükleme betiğindeki değişiklikler tam bir Electron yeniden başlatması gerektirir; çünkü bunlar Vite HMR sınırının dışında çalışır.

Electron + React + TypeScript projeleri; ana süreç (Node.js/CommonJS'i hedefleyen), ön yükleme (Node genel değişkenleriyle tarayıcı benzeri bir ortamı hedefleyen) ve oluşturucu süreç (standart tarayıcı TypeScript'i) için ayrı tsconfig dosyalarına ihtiyaç duyar. electron-vite bu yapılandırmaları otomatik olarak oluşturur.

Ön yükleme betiği, özel API'nizi oluşturucu sürece aktarmak için contextBridge.exposeInMainWorld işlevini kullanır. Yaygın bir yaklaşım, ipcRenderer.invoke çağrılarını saran işlevlerle "api" gibi bir ad alanını dışa aktarmaktır; böylece React bileşenleri ana süreç işlemleri için temiz bir eşzamansız arayüze sahip olur.

Herhangi bir React bileşeninden, dışa aktarılan ön yükleme API'sini çağırmak için window.api.myFunction() işlevini kullanırsınız. TypeScript kullanıcıları genellikle genel bir bildirim (window: Window & { api: MyAPI }) ekler; böylece dışa aktarılan arayüz için tür denetimi ve otomatik tamamlama desteği elde ederler.

electron-vite build, üç hedefin (ana süreç, ön yükleme ve oluşturucu süreç) tümünü dist/ klasöründe derler. electron-builder ise bunları platforma özgü bir yükleyici içinde paketler. Üretim main.js dosyası, oluşturucuyu geliştirme sunucusu URL'si yerine paketlenmiş dosya yolundan yükler.

En sık yapılan kurulum hataları şunlardır: nodeIntegration:false ve contextIsolation:true ayarlarını unutmamak (güvenlik açıkları oluşturur), main.js içinde yanlış URL'yi yüklemek (geliştirme ve üretim ortamlarını karıştırmak) ve Electron modüllerini doğrudan oluşturucu sürece aktarmak (çökmelere neden olur). electron-vite varsayılanları bu sorunların çoğunu önler.

electron-vite dev komutunu çalıştırmak ne sağlar?

React'ı Electron ile kurmak, çok süreçli derlemenin karmaşıklığını yöneten electron-vite sayesinde kolaylaşır. Geliştirme iş akışı tam HMR desteği sunar, contextBridge oluşturucu API yüzeyini güvenli hâle getirir ve ayrı TypeScript yapılandırmaları her sürecin doğru tür ortamına sahip olmasını sağlar. Üretim derlemeleri, platforma özgü paketleme için electron-builder'ı kullanır.