Cómo transformar cualquier web en una app de escritorio con Electron paso a paso

¿Tienes una página web que ya funciona y te gustaría convertirla en una aplicación de escritorio sin tener que reescribirla desde cero? Pues estás de suerte. Gracias a Electron.js, puedes llevar tu web a Windows, macOS y Linux de manera sencilla y con una sola base de código. Esta solución, cada vez más popular, ha sido la elección de empresas como Microsoft, Slack o Discord para desarrollar algunas de sus apps de escritorio más exitosas.

En este artículo vamos a destripar cómo funciona Electron, cómo puedes convertir cualquier sitio web en una aplicación de escritorio y qué herramientas puedes usar para acelerar el proceso. Lo mejor es que no necesitas conocimientos avanzados de desarrollo de escritorio, porque todo se hace con JavaScript, HTML y CSS. Y si ya trabajas con frameworks como React o Vue, prepárate porque vas a poder aprovechar todo ese conocimiento.

¿Qué es exactamente Electron y por qué usarlo?

Electron.js es un framework desarrollado por GitHub que permite crear aplicaciones de escritorio usando tecnologías web. En esencia, es como meter tu web en un envoltorio que la hace ejecutable en diferentes sistemas operativos.

¿Qué tipo de aplicaciones se pueden hacer con Electron?

Desde herramientas internas de empresa hasta productos comerciales. Algunas de las apps más populares creadas con Electron son:

Visual Studio Code: el editor de código de Microsoft.
Slack: el cliente de mensajería para equipos.
Discord: la famosa plataforma de comunicación para gaming y comunidades.
Postman: herramienta para pruebas de APIs.

Esto demuestra que Electron es más que válido para proyectos serios y de alto rendimiento, aunque es importante tener en cuenta cómo se desarrolla la app para no duplicar procesos ni malgastar recursos.

¿Qué necesitas para empezar?

Antes de lanzarte al código, asegúrate de tener estas herramientas básicas instaladas:

Node.js: imprescindible para instalar dependencias y ejecutar scripts.
npm o yarn: gestores de paquetes que te permitirán instalar Electron y otras librerías.

Una vez tienes eso listo, ya puedes instalar Electron. Se recomienda hacerlo como una dependencia de desarrollo:

npm install electron --save-dev

O si prefieres usarlo de forma global:

npm install -g electron

Después, debes indicar en el package.json cuál es tu archivo de entrada (el proceso main):

{
  "main": "main.js"
}

Si no lo especificas, Electron buscará un archivo index.js por defecto.

Creando tu primera app básica con Electron

Vamos a ver lo mínimo que necesitas para hacer que una web empiece a funcionar como aplicación de escritorio. El punto de partida es el archivo main.js, donde crearás una ventana de navegador y cargarás tu página HTML:

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Eso te basta para que, al ejecutar electron ., se abra una ventana con tu HTML. Dentro del main también puedes escuchar eventos para manejar el cierre, minimización o restauración de la app.

Entendiendo la arquitectura de procesos

Como mencionamos antes, hay dos procesos principales:

Proceso Main

Es el corazón de la aplicación. Desde aquí puedes crear ventanas, escuchar eventos del sistema, activar funcionalidades nativas como notificaciones y controlar el estado global de la app.

Proceso Renderer

Se instancia cada vez que se crea una BrowserWindow. Se encarga de mostrar el contenido web. Puedes usar aquí cualquier framework de frontend: React, Vue, Angular, o simplemente HTML y JS puro. Recuerda que incluso aplicaciones como Project G de Nvidia pueden beneficiarse de estas tecnologías.

Tanto el main como el renderer pueden usar las APIs de Node.js, pero por motivos de seguridad, lo recomendable es crear una capa de comunicación entre ambos mediante ipcMain e ipcRenderer. También puedes usar un preload script para exponer funciones seguras desde el main al renderer.

Creando funcionalidades nativas personalizadas

Una de las cosas más poderosas de Electron es poder acceder a funciones que normalmente están fuera del alcance de una página web. Por ejemplo:

Mostrar notificaciones de sistema.
Leer o escribir archivos del disco duro.
Acceso a la portapapeles, red o información del sistema.

Estas funciones deben activarse desde el proceso main. Si quieres, desde el renderer puedes enviarlas mediante ipcRenderer.send() y escucharlas en el main con ipcMain.on(), o usar ipcMain.handle() si necesitas recibir respuestas.

Herramientas que te facilitan la vida: Electron Forge

Electron Forge es un conjunto de herramientas que optimiza el desarrollo con Electron. Te da:

Proyectos preconfigurados con Webpack, Vite o TypeScript.
Comandos para ejecutar, compilar y generar instaladores.
Soporte para cargar frameworks como React o Vue fácilmente.

Un ejemplo de cómo iniciar un proyecto con Electron Forge, Vite y TypeScript:

npm init electron-app@latest mi-app -- --template=vite-typescript

Después, puedes ejecutar la app con:

cd mi-app && npm start

Ahora que sabes cómo empezar, es posible que también desees conocer cómo funcionan las aplicaciones en otros sistemas como Windows y sus nuevas características, como el Windows App.

Cómo empaquetar tu aplicación y generar instaladores

Una vez que tienes tu app lista, quieres que los usuarios puedan instalarla como cualquier otra. Para eso puedes usar herramientas como:

electron-packager
electron-builder
electron-forge make

Estas herramientas crean los ejecutables correspondientes para cada sistema operativo (.exe en Windows, .dmg en macOS, .AppImage o .deb en Linux). También puedes configurar íconos personalizados, firmas digitales, auto-updates y más.

Por ejemplo, para generar instaladores con Electron Forge sólo necesitas ejecutar:

npm run make

Y el toolkit se encargará del resto, creando los paquetes en la carpeta out.

¿Y si quiero convertir un proyecto web existente como uno en React o Vue?

Perfectamente posible. Puedes tomar tu app en React, Vue o cualquier otro framework, y cargarla dentro de una ventana de Electron. Solo necesitas un archivo main que cargue el index.html final compilado del proyecto.

Si usas Vite para tu proyecto React/Vue, puedes configurar el vite.config.js para que compile los archivos en una carpeta dist que luego será cargada por Electron con loadFile(). También puedes enviar eventos desde tu interfaz hacia el proceso main usando ipcRenderer si usas preload.ts, como este ejemplo:

ipcMain.handle('seleccionar-carpeta', () => {
  // aquí abres el selector de carpetas
});

Luego, desde la interfaz usando Electron Bridge:

window.electron.invoke('seleccionar-carpeta')

Esto demuestra la versatilidad de Electron en la creación de aplicaciones, similar a cómo las alternativas a WhatsApp han tomado en cuenta las integraciones necesarias para ser eficientes.

¿Cuáles son los inconvenientes más comentados de Electron?

No todo es color de rosa. Electron ha recibido críticas, sobre todo por su alto consumo de RAM. Y es que al usar Chromium y Node.js juntos, estás cargando dos entornos para correr una sola app.

Un simple «Hola Mundo» puede consumir hasta 60 MB de memoria, algo que no ocurre con apps nativas. Sin embargo, depende mucho de cómo desarrolles tu aplicación y qué tantas optimizaciones hagas. No es lo mismo el cliente de Slack que VS Code, siendo ambos escritos con Electron pero con rendimientos muy distintos.

Por eso es importante tener buenas prácticas de desarrollo, gestionar adecuadamente procesos, minimizar el uso de recursos innecesarios y evitar cargar librerías pesadas si no son necesarias.

Casos de uso e inspiración para tus propios proyectos

Electron es ideal para:

Aplicaciones internas o POC: como herramientas internas de empresa que necesitan interfaz GUI.
Convertir tus webs favoritas en apps: por ejemplo, clientes de redes sociales, dashboards, administradores de APIs, etc.
Aplicaciones comerciales multiplataforma sin tener que aprender desarrollo nativo.

Muchos desarrolladores también crean clientes de APIs, dashboards para datos o juegos simples con engines como Phaser cargados en Electron. Esto se ha vuelto una tendencia en la creación de aplicaciones para el usuario medio.

Ahora que conoces todo lo necesario, puedes instalar Electron, cargar tu web y comenzar a adaptarla como si fuera una aplicación completamente independiente del navegador. Recuerda que cuanto más personalizada sea la integración con el sistema operativo (ventanas, menús, notificaciones, almacenamiento local, etc.), más profesional parecerá tu app.

ActualidadGadget