Empaquetar una aplicación de React con Electron en 4 minutos

El autor posee los derechos de la imagen. Los iconos han sido extraídos desde sus respectivas páginas web.

Con el tiempo React se ha consolidado como una de las bibliotecas más populares para la creación de interfaces de usuario. Sin embargo, a medida que las aplicaciones web se vuelven más complejas, surge la necesidad de llevar estas experiencias más allá del navegador. Aquí es donde entra Electron. Con él puedes empaquetar tu aplicación de React y distribuirla como una aplicación de escritorio para Windows, MacOS o Linux sin necesidad de reescribir el código base.
En este artículo, te guiaré paso a paso a través del proceso de empaquetar una aplicación de React utilizando las herramientas que proporciona Electron. ¡Vamos a ello!

¿Qué es React y qué es Electron?

React es una biblioteca de JavaScript utilizada para construir interfaces de usuario interactivas y dinámicas. Su principal característica es la capacidad de crear componentes reutilizables, lo que facilita el desarrollo y la organización de aplicaciones complejas.
Electron es un framework que permite a los desarrolladores transformar aplicaciones web en aplicaciones de escritorio multiplataforma, utilizando tecnologías web como HTML, CSS y JavaScript.

Antes de empezar…

Antes de empezar es importante tener instalado NodeJS en nuestro sistema. Podremos instalarlo a través de su página web. Además, este proyecto utiliza Vite.

¿Cómo empaquetamos nuestra aplicación?

Primero tendremos que ubicarnos dentro de nuestro proyecto mediante una terminal, ya que instalaremos Electron. Para instalarlo escribiremos lo siguiente:

npm i -D electron electron-is-dev
npm install electron electron-builder --save-dev

Como podemos observar no solo instalamos Electron, sino que también instalamos una librería llamada electron-is-dev encargada de comprobar si nuestra aplicación está ejecutándose en desarrollo o producción. Una vez que ambas dependencias estén instaladas procederemos a configurarlas.

Para configurar Electron dentro de nuestra aplicación de React tendremos que crear un archivo al cual llamaremos electron.js en el root de nuestra aplicación. Dentro de nuestro archivo electron.js escribiremos lo siguiente:

import { app, BrowserWindow } from 'electron';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';
import isDev from 'electron-is-dev';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
let mainWindow;
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1080,
    height: 920,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: true,
    },
  });
  let startURL;
  if (isDev) {
    startURL = '<http://localhost:5173>';
  } else {
    startURL = `file://${join(__dirname, 'dist', 'index.html')}`;
  }
  mainWindow.loadURL(startURL);
  mainWindow.on('closed', () => (mainWindow = null));
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Este código crea una aplicación de escritorio con Electron que abre una ventana principal cargando tu aplicación de React. También maneja eventos clave del ciclo de vida de la aplicación, como la creación de ventanas, el cierre de la aplicación y la activación de la ventana principal en MacOS.

Para finalizar cambiaremos nuestro package.json para que quede de esta forma:

...
 "scripts": {
   "preview": "vite preview",
   "react": "vite",
   "electron": "electron .",
   "build": "tsc -b && vite build",
   "dist": "electron-builder"
 },
 "main": "electron.js",
 "build": {
   "appId": "com.example.your_app",
   "productName": "your_app",
   "directories": {
     "output": "dist_electron"
   },
   "files": [
     "dist/**/*",
     "electron.js"
   ],
   "extraResources": {
     "from": "dist/",
     "to": "app/dist/"
   },
   "mac": {
     "target": "dmg",
     "category": "public.app-category.productivity"
   },
   "win": {
     "target": [
       {
         "target": "nsis",
         "arch": [
           "x64"
         ]
       }
     ],
     "icon": "build/icon.ico"
   },
   "nsis": {
     "oneClick": false,
     "perMachine": true,
     "allowToChangeInstallationDirectory": true,
     "createDesktopShortcut": true,
     "createStartMenuShortcut": true
   },
   "linux": {
     "target": [
       "AppImage",
       "deb",
       "tar.gz"
     ],
     "category": "Utility",
     "icon": "build/icons"
   }
 }
}

Podemos observar que hemos separado la forma en la cual ejecutamos nuestra aplicación, en este caso cambiando el comando de start por react, y hemos añadido un script para ejecutar Electron. Después, hemos implementado unas configuraciones para la construcción y empaquetado de la aplicación.

Para comprobar que todo funciona correctamente antes de empaquetar nuestra aplicación abriremos dos terminales escribiendo unos comandos en un orden específico. Primero, en una de ellas escribiremos el siguiente comando:

npm run react

Y en la otra terminal escribiremos el siguiente comando:

npm run electron

De esta forma se nos abrirá nuestra aplicación como si fuese una aplicación de escritorio. Si en algún momento tienes un problema con electron-is-dev a la hora de ejecutar la aplicación, opta por instalarlo como dependencia en vez de como dependencia de desarrollo. Una vez comprobado que todo funciona correctamente cancelaremos todos los procesos en ejecución para poder realizar el empaquetado.

Adaptaremos el archivo vite.config.ts añadiendo la propiedad base para que la aplicación pueda localizar los archivos Javascript y CSS en el index.html, generado en la carpeta dist al ejecutar el comando npm run build, haciendo que las rutas sean relativas en vez de absoluta. Así debería de quedar el archivo:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  base: './',
  plugins: [react()],
})

Para empaquetar nuestra aplicación tendremos que ejecutar dos comandos en el orden indicado. Primero escribiremos en nuestra terminal el siguiente comando:

npm run build

Para finalizar, podemos tener nuestra aplicación empaquetada y lista para funcionar con el siguiente comando:

npm run dist

¡Y listo! Una vez haya completado el proceso podemos adentrarnos dentro del nuevo directorio recientemente creado, localizar el ejecutable o el instalador, y podremos comprobar que la aplicación funciona perfectamente.

Conclusiones

Empaquetar una aplicación de React con Electron es un proceso sencillo que permite convertir aplicaciones web en aplicaciones de escritorio en pocos pasos. Esta capacidad ofrece a los desarrolladores una poderosa herramienta para ampliar el alcance de sus aplicaciones facilitando su distribución. ¡Ahora estás listo para llevar tus aplicaciones al siguiente nivel!