Cómo convertir tu web en una app de escritorio con Electron

Hoy en día, muchas aplicaciones de escritorio que usas diariamente están construidas con tecnologías web como HTML, CSS y JavaScript. Herramientas como Visual Studio Code, Slack, Discord o Postman son en esencia sitios web que funcionan como aplicaciones de escritorio gracias a un framework muy potente: Electron. Para aprender más sobre este proceso, puedes consultar cómo transformar aplicaciones web en escritorio con Chrome.

Pero, ¿qué significa esto realmente? Significa que puedes tomar cualquier aplicación web, incluso una página sencilla hecha con React, Vue o cualquier otro framework moderno de JavaScript, y convertirla en un programa instalable para Windows, Linux o macOS. Esta posibilidad ha abierto la puerta para que miles de desarrolladores transformen su trabajo web en herramientas nativas de escritorio sin aprender lenguajes ni frameworks complicados como C++ o Java.

¿Qué es Electron y por qué es tan relevante?

Electron es un framework de código abierto desarrollado por GitHub que combina Chromium (el motor del navegador Google Chrome) con Node.js, permitiendo así ejecutar aplicaciones web como si fueran nativas en distintas plataformas. En palabras simples, Electron actúa como un navegador encapsulado que carga tu proyecto web y le da acceso a funcionalidades del sistema operativo.

Esto tiene muchas ventajas: puedes usar el mismo stack de tecnologías que ya conoces (HTML, CSS, JS), reutilizar componentes y librerías existentes, y crear un único código fuente para múltiples sistemas operativos.

Estructura básica de una aplicación en Electron

Una app en Electron se divide principalmente en dos procesos:

• Main Process: Es el núcleo de la aplicación, donde se crean y controlan las ventanas usando el módulo BrowserWindow. Este proceso tiene acceso total al sistema operativo gracias a Node.js.
• Renderer Process: Es donde se renderiza la interfaz de usuario (UI), equivalente a lo que verías en un navegador web. Cada ventana que crees tendrá su propio proceso renderer.

Estos procesos están aislados por seguridad, por lo tanto, la comunicación entre ellos es necesaria para acceder a funcionalidades nativas (como abrir archivos o mostrar notificaciones). Esto se realiza mediante los módulos ipcMain e ipcRenderer.

Ambos procesos pueden acceder a las funcionalidades de Node.js, lo cual abre un abanico de posibilidades como leer archivos del sistema, realizar peticiones HTTP, manejar bases de datos locales, entre otros.

Primeros pasos: Instalación y configuración de Electron

Antes de comenzar, necesitas tener instalado Node.js y npm (el gestor de paquetes de Node). Luego, puedes instalar Electron como una dependencia de desarrollo en tu proyecto web:

npm install electron --save-dev

También puedes instalarlo de forma global:

npm install -g electron

Una vez instalado, debes crear el archivo de entrada del proceso principal. Por convención se llama main.js o electron.js y debe ser referenciado en el package.json con la propiedad main:

"main": "electron.js"

Este archivo incluirá algo como lo siguiente para abrir tu app:

const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  });
  win.loadFile('index.html');
}
app.whenReady().then(createWindow);

Este código crea una ventana con un tamaño específico que carga tu archivo index.html.

Cómo integrar una aplicación web en Electron

Ya sea que tu app esté hecha con React, Vue, Angular o vanilla JavaScript, el objetivo es el mismo: servir el contenido web al proceso renderer. Para esto tienes dos opciones:

• Modo desarrollo: cargar la app desde http://localhost:3000 usando win.loadURL() en modo desarrollo.
• Modo producción: construir tu app web y cargar desde file:// directamente el index.html con win.loadFile().

Por ejemplo, si usas React con Vite, después de hacer npm run build, el archivo resultante se encuentra en dist/index.html y se carga así:

mainWindow.loadFile(path.join(__dirname, 'dist', 'index.html'));

Preload scripts y comunicación entre procesos

Para mejorar la seguridad y funcionalidad, muchas aplicaciones incluyen un archivo llamado preload.js que se ejecuta antes del render pero después de que la ventana se crea. Esto permite exponer ciertos métodos de forma controlada.

contextBridge.exposeInMainWorld('electronAPI', {
  closeApp: () => ipcRenderer.send('close')
});

Y en el proceso principal:

ipcMain.on('close', () => {
  app.quit();
});

De esta manera puedes comunicar procesos sin perder seguridad ni exponer variables sensibles. Si deseas aprender más sobre cómo funcionan las aplicaciones de escritorio, puedes explorar el artículo sobre el bloqueo de la aplicación de escritorio de WhatsApp.

Empaquetado y distribución multiplataforma

Una vez que tu app funciona correctamente, puedes usar herramientas como electron-builder o electron-packager para empaquetar tu aplicación en formatos instalables:

• Windows: .exe o instaladores NSIS
• macOS: .dmg o .app
• Linux: .AppImage, .deb o .tar.gz

Instalas con:

npm install --save-dev electron-builder

Y defines en tu package.json la configuración de build:

"build": {
  "appId": "com.miempresa.miapp",
  "productName": "MiApp",
  "directories": {
    "output": "dist_electron"
  },
  "files": ,
  "win": {
    "target": "nsis"
  }
}

Luego ejecutas:

npm run build
npm run dist

Mejoras que puedes integrar en tu app desktop

Una vez que tienes tu aplicación convertida y funcionando como app de escritorio, puedes mejorarla con funcionalidades nativas:

• Mostrar notificaciones del sistema desde tu interfaz.
• Menús nativos de archivo, edición, ayuda, etc.
• Acceso al sistema de archivos para lectura y escritura.
• Atajos de teclado personalizados definidos globalmente.

También puedes integrar librerías como:

• slide-puzzle-engine para juegos tipo rompecabezas.
• sqlite3 o nedb para bases de datos locales.
• sharp para procesamiento de imágenes.

¿Es Electron la mejor opción siempre?

Electronic tiene algunas desventajas que deben considerarse:

• Alto consumo de memoria, ya que corre Chromium + Node.js.
• Tamaño considerable del ejecutable, incluso para apps sencillas.
• Problemas de rendimiento en equipos antiguos o con poca RAM.

Aun así, si optimizas tu código y evitas cargar librerías innecesarias, puedes tener buenos resultados. Algunas apps como Visual Studio Code lo demuestran. En caso de que estés interesado en cómo los móviles dejarán de funcionar WhatsApp en abril de 2025, es un dato importante a considerar.

Todo depende del objetivo de tu proyecto: si necesitas rapidez de desarrollo, compatibilidad entre plataformas y una interfaz moderna, Electron es ideal. Pero si buscas eficiencia de recursos al máximo, quizás lo tuyo sea desarrollar apps nativas.

Como has podido ver, Electron te permite crear aplicaciones de escritorio con las mismas tecnologías que usas para la web. Es versátil, bien documentado, y con una comunidad creciente. Desde herramientas de productividad hasta videojuegos sencillos, las posibilidades están abiertas para los desarrolladores que quieren llevar su experiencia web más allá del navegador. Si tienes un proyecto web que quieres distribuir como app, sin duda Electron es la herramienta perfecta para hacerlo rápido y sin reinventar la rueda.