Configuración de React con Electron

Configurar React con Electron comienza por crear un proyecto de React con Vite y, después, añadir electron y electron-builder como devDependencies. El proyecto termina teniendo dos puntos de entrada: la aplicación de Vite para el proceso de renderizado y un archivo main.js para el proceso principal de Electron.

main.js es el punto de entrada de Electron. Crea un BrowserWindow con las dimensiones y la configuración de seguridad deseadas y, después, carga la aplicación React: apunta a localhost:5173 durante el desarrollo y a una ruta de archivo compilado en producción.

electron-vite es una herramienta de compilación todo en uno que integra Vite con Electron y gestiona automáticamente la compleja configuración de compilación multiproceso. Proporciona configuraciones independientes de Vite para los procesos principal, de precarga y de renderizado, y simplifica considerablemente las compilaciones de desarrollo y producción.

Al configurar Vite para Electron, debe establecer objetivos de navegador explícitos en lugar de depender de la detección automática, porque el proceso de renderizado se ejecuta en una versión específica de Chromium integrada en Electron. electron-vite lo gestiona automáticamente, pero las configuraciones manuales requieren especificar la versión de Chrome en el objetivo de compilación.

Ejecutar electron-vite dev inicia simultáneamente el servidor de desarrollo de Vite para el proceso de renderizado y el proceso principal de Electron. El servidor de desarrollo de Vite proporciona Hot Module Replacement, por lo que los cambios en sus componentes React aparecen al instante en la ventana de Electron sin necesidad de reiniciar por completo la aplicación.

HMR funciona en el proceso de renderizado de Electron igual que en un navegador: los componentes editados se vuelven a renderizar al instante y conservan su estado. Solo los cambios en main.js o en el script de precarga requieren reiniciar por completo Electron, ya que se ejecutan fuera del límite de HMR de Vite.

Los proyectos de Electron + React + TypeScript necesitan archivos tsconfig separados para main (con destino a Node.js/CommonJS), preload (con destino a un entorno similar al navegador con globales de Node) y renderer (TypeScript estándar para navegador). electron-vite crea automáticamente estas configuraciones.

El script de precarga utiliza contextBridge.exposeInMainWorld para exponer su API personalizada al proceso de renderizado. Un patrón habitual consiste en exponer un espacio de nombres como "api" con funciones que encapsulan llamadas a ipcRenderer.invoke, lo que proporciona a los componentes React una interfaz asíncrona y clara para las operaciones del proceso principal.

Desde cualquier componente React, llame a window.api.myFunction() para invocar la API expuesta por la precarga. Los usuarios de TypeScript suelen añadir una declaración global (window: Window & { api: MyAPI }) para obtener comprobación de tipos y autocompletado para la interfaz expuesta.

electron-vite build compila los tres objetivos (main, preload, renderer) en la carpeta dist/. Después, electron-builder los empaqueta en un instalador específico para cada plataforma. El main.js de producción carga el proceso de renderizado desde la ruta del archivo incluido en el paquete, en lugar de hacerlo desde la URL del servidor de desarrollo.

Los errores de configuración más frecuentes son olvidar nodeIntegration:false y contextIsolation:true (lo que crea vulnerabilidades de seguridad), cargar la URL incorrecta en main.js (desarrollo frente a producción) e importar directamente módulos de Electron en el proceso de renderizado (lo que provoca fallos). Los valores predeterminados de electron-vite evitan la mayoría de estos problemas.

¿Qué se consigue al ejecutar electron-vite dev?

La configuración de React con Electron se simplifica gracias a electron-vite, que gestiona la complejidad de la compilación multiproceso. El flujo de desarrollo ofrece compatibilidad completa con HMR, contextBridge protege la superficie de la API del proceso de renderizado y las configuraciones independientes de TypeScript garantizan que cada proceso tenga el entorno de tipos correcto. Las compilaciones de producción utilizan electron-builder para crear paquetes específicos para cada plataforma.