Crea tu primera app de escritorio con Electron en 15 minutos

Si sabes un poco de JavaScript, HTML y CSS, ya sabes casi todo lo que necesitas para hacer un programa de escritorio. Electron te deja usar esas mismas herramientas para crear apps que se instalan en Windows, macOS y Linux. Programas como Visual Studio Code, Slack y Discord funcionan así.

En este artículo vamos a crear una app desde cero, paso a paso. No necesitas experiencia previa con Electron. Solo necesitas tener Node.js instalado y un editor de código. Si todavía no tienes Node.js, descárgalo de su página oficial y elige la versión LTS.

Al final vas a tener una ventana propia, con tu propio diseño y un botón que responde a tus clics. Es poco, pero con esa base puedes armar cualquier cosa después.

¿Qué es Electron y cómo funciona?

Electron junta dos cosas: Node.js y Chromium, el motor del navegador Chrome. Node.js se encarga de hablar con tu computadora (archivos, impresoras, ventanas) y Chromium se encarga de mostrar tu página web dentro de una ventana.

Por eso una app Electron tiene dos partes. El proceso principal crea las ventanas y controla la app. El proceso de renderizado es la página web que se ve dentro de cada ventana. Más adelante en la serie vamos a ver cómo se comunican entre ellos.

Paso 1: crea la carpeta del proyecto

Abre una terminal y ejecuta estos comandos:

mkdir mi-primera-app
cd mi-primera-app
npm init -y
npm install electron --save-dev

El primero crea la carpeta, el segundo entra en ella, el tercero genera el archivo package.json y el último instala Electron como dependencia de desarrollo.

Paso 2: ajusta el package.json

Abre el package.json y cambia dos cosas: el campo main, que le dice a Electron cuál es el archivo de inicio, y el script start, que arranca la app.

{
  "name": "mi-primera-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

No borres el bloque devDependencies que npm agregó al instalar Electron. Lo importante son las líneas de main y start.

Paso 3: escribe el proceso principal

Crea un archivo llamado main.js con este código:

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

function crearVentana() {
  const ventana = new BrowserWindow({
    width: 900,
    height: 600
  })

  ventana.loadFile('index.html')
}

app.whenReady().then(() => {
  crearVentana()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) crearVentana()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

Veamos qué hace cada parte.

La función crearVentana abre una ventana de 900 por 600 píxeles y carga tu página. Cuando Electron termina de arrancar (whenReady), llama a esa función.

El bloque activate es para macOS: si el usuario hace clic en el ícono del dock y no hay ventanas abiertas, la app abre una nueva. Por último, cuando cierras todas las ventanas, la app se cierra, excepto en macOS, donde las apps suelen quedarse abiertas.

Paso 4: crea la página

Ahora crea index.html. Es una página web normal:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'">
  <title>Mi primera app</title>
  <style>
    body { font-family: sans-serif; text-align: center; margin-top: 120px; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
  </style>
</head>
<body>
  <h1 id="titulo">Hola desde Electron</h1>
  <button id="boton">Haz clic aquí</button>

  <script>
    document.getElementById('boton').addEventListener('click', () => {
      document.getElementById('titulo').textContent = 'Funciona. Ya hiciste tu primera app.'
    })
  </script>
</body>
</html>

La línea de Content-Security-Policy es una medida de seguridad. Si no la pones, Electron muestra una advertencia en la consola. Sobre seguridad vamos a hablar a fondo en otro artículo.

Paso 5: ejecuta la app

En la terminal, dentro de la carpeta del proyecto, escribe:

npm start

Después de uno o dos segundos se abre tu ventana. Haz clic en el botón y el texto cambia. Esa es tu app de escritorio.

Errores comunes al empezar

• La ventana sale en blanco: revisa que el nombre del archivo en loadFile coincida con el real, incluyendo mayúsculas.
• “Cannot find module ‘electron'”: no instalaste Electron o estás en otra carpeta. Corre npm install dentro del proyecto.
• Nada pasa al correr npm start: mira que el campo main del package.json apunte a main.js.

¿Y ahora qué sigue?

Ya tienes lo básico funcionando. El siguiente paso natural es mejorar el proyecto con Vite, React y TypeScript, y aprender cómo el proceso principal y la página intercambian datos. Con eso puedes guardar archivos, usar una base de datos y hacer cosas que una página web normal no puede.

Si te quedó alguna duda con los pasos, déjala en los comentarios y la revisamos.