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

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

Artículo extendido.

React se ha consolidado como una de las bibliotecas más populares. Sin embargo, a medida que las aplicaciones crecen, surge la necesidad de llevar estas aplicaciones más allá. Electron, puede empaquetar tu aplicación y distribuirla como una aplicación de escritorio sin necesidad de reescribir el código.
Te guiaré paso a paso para empaquetar tu aplicación utilizando Electron. ¡Vamos a ello!

¿Qué es React y qué es Electron?

React es una biblioteca de JavaScript ampliamente utilizada para construir aplicaciones web. Electron nos permite empaquetar aplicaciones web como aplicaciones de escritorio sin reescribir código.

Antes de empezar…

Es importante tener instalado NodeJS. Para instalarlo podemos hacerlo mediante 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 para instalar Electron escribiendo el siguiente comando:

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

Para configurar Electron tendremos que crear un archivo llamado electron.js en el root de nuestro proyecto. Dentro del archivo 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,
  });
  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();
  }
});

Abriremos nuestro package.json cambiándolo de la siguiente 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"
   }
 }
}

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 ejecutaremos dos comandos en el siguiente orden. El primer comando será:

npm run build

Y el segundo comando será:

npm run dist

Una vez haya completado el proceso podemos adentrarnos dentro del nuevo directorio recientemente creado, localizar el ejecutable o el instalador, y podremos comprobar que nuestra aplicación ha sido empaquetada.

Conclusiones

Empaquetar una aplicación de React con Electron es un proceso simple que te permite distribuir tu aplicación como un software de escritorio. ¡Ahora puedes llevar tus proyectos al siguiente nivel!