Crea tu primera app de escritorio con Electron: un Login Basico

  • 07 Mar
  • 2026

En este tutorial vas a aprender a crear una aplicacion de escritorio desde cero usando Electron y Bootstrap. Vamos a construir un login basico paso a paso. Es mas facil de lo que piensas.

Que es Electron?

Electron es un framework que te permite crear aplicaciones de escritorio usando tecnologias web: HTML, CSS y JavaScript. Aplicaciones como Visual Studio Code, Discord y Slack estan hechas con Electron.

La ventaja principal es que si ya sabes hacer paginas web, ya sabes hacer apps de escritorio.

Que necesitas antes de empezar?

  • Node.js instalado (version 18 o superior). Descargalo desde nodejs.org
  • Un editor de codigo (recomiendo Visual Studio Code)
  • Conocimientos basicos de HTML, CSS y JavaScript
Tip: Para verificar que tienes Node.js instalado, abre tu terminal y escribe node -v. Deberia mostrarte la version.

Paso 1: Crear la carpeta del proyecto

Abre tu terminal y ejecuta estos comandos para crear la carpeta y entrar en ella:

mkdir electron-login
cd electron-login

Paso 2: Inicializar el proyecto con npm

Dentro de la carpeta, ejecuta:

npm init -y

Esto crea un archivo package.json con la configuracion basica del proyecto.

Ahora abre el archivo package.json y modificalo para que quede asi:

package.json
{
“name”: “electron-login”,
“version”: “1.0.0”,
“description”: “Login basico con Electron y Bootstrap”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
},
“author”: “ProgramarEsFacil”,
“license”: “MIT”
}
Importante: Asegurate de que “main” apunte a “main.js” y que el script “start” sea “electron .”

Paso 3: Instalar Electron

En la terminal, ejecuta:

npm install electron –save-dev

Esto descarga Electron como dependencia de desarrollo. Puede tardar un poco, es normal.

Paso 4: Crear el archivo principal (main.js)

Este es el cerebro de nuestra aplicacion. Aqui le decimos a Electron que ventana abrir y manejamos la logica del login.

Crea un archivo llamado main.js en la raiz del proyecto:

main.js
const { app, BrowserWindow, ipcMain } = require(‘electron’);
const path = require(‘path’);

function createWindow() {
const win = new BrowserWindow({
width: 500,
height: 600,
resizable: false,
autoHideMenuBar: true,
webPreferences: {
preload: path.join(__dirname, ‘preload.js’)
}
});

win.loadFile(‘login.html’);
}

// Usuario y contraseña de ejemplo
const USUARIO = ‘admin’;
const PASSWORD = ‘1234’;

ipcMain.handle(‘login’, (event, usuario, password) => {
if (usuario === USUARIO && password === PASSWORD) {
return { exito: true, mensaje: ‘Bienvenido ‘ + usuario };
} else {
return { exito: false, mensaje: ‘Usuario o contraseña incorrectos’ };
}
});

app.whenReady().then(() => {
createWindow();
});

app.on(‘window-all-closed’, () => {
app.quit();
});

Que hace cada parte?

  • BrowserWindow: Crea la ventana de nuestra app (como una ventana del navegador pero sin barra de direcciones)
  • ipcMain.handle(‘login’): Escucha cuando el formulario envia los datos y los valida
  • app.whenReady(): Cuando Electron esta listo, crea la ventana
  • webPreferences.preload: Carga un script puente que conecta el HTML con Electron de forma segura

Paso 5: Crear el archivo preload.js (el puente)

Este archivo es el puente entre la interfaz (HTML) y el proceso principal (main.js). Es una buena practica de seguridad en Electron.

preload.js
const { contextBridge, ipcRenderer } = require(‘electron’);

contextBridge.exposeInMainWorld(‘api’, {
login: (usuario, password) => ipcRenderer.invoke(‘login’, usuario, password)
});

Que hace?

Expone una funcion window.api.login() que nuestro HTML puede usar para enviar el usuario y contraseña al proceso principal. Asi el HTML no tiene acceso directo a Node.js (esto es por seguridad).

Piensalo asi: El preload.js es como un mesero en un restaurante. El HTML (el cliente) le pide algo al mesero, y el mesero se lo lleva a la cocina (main.js). El cliente nunca entra a la cocina directamente.

Paso 6: Crear la interfaz del login (login.html)

Aqui es donde usamos Bootstrap para que se vea bonito sin complicarnos con CSS. Crea el archivo login.html:

login.html
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Login – Electron</title>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css”
rel=“stylesheet”>
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card {
border: none;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
}
</style>
</head>
<body>

<div class=“card p-4” style=“width: 380px;”>
<div class=“card-body”>
<h3 class=“text-center mb-4”>Iniciar Sesion</h3>

<div id=“alerta” class=“alert d-none”></div>

<form id=“formLogin”>
<div class=“mb-3”>
<label for=“usuario” class=“form-label”>Usuario</label>
<input type=“text” class=“form-control” id=“usuario”
placeholder=“Escribe tu usuario” required>
</div>

<div class=“mb-3”>
<label for=“password” class=“form-label”>Contraseña</label>
<input type=“password” class=“form-control” id=“password”
placeholder=“Escribe tu contraseña” required>
</div>

<button type=“submit” class=“btn btn-primary w-100 mt-2”>
Entrar
</button>
</form>
</div>
</div>

<script>
const form = document.getElementById(‘formLogin’);
const alerta = document.getElementById(‘alerta’);

form.addEventListener(‘submit’, async (e) => {
e.preventDefault();

const usuario = document.getElementById(‘usuario’).value;
const password = document.getElementById(‘password’).value;

const resultado = await window.api.login(usuario, password);

alerta.classList.remove(‘d-none’, ‘alert-success’, ‘alert-danger’);

if (resultado.exito) {
alerta.classList.add(‘alert-success’);
} else {
alerta.classList.add(‘alert-danger’);
}
alerta.textContent = resultado.mensaje;
});
</script>

</body>
</html>

Estructura final del proyecto

Tu proyecto deberia verse asi:

electron-login/
├── node_modules/
├── login.html
├── main.js
├── preload.js
├── package.json
└── package-lock.json

Solo 4 archivos creados por ti. Asi de simple.

Paso 7: Ejecutar la aplicacion

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

npm start

Se abrira una ventana con tu formulario de login. Prueba con:

  • Usuario: admin
  • Contraseña: 1234

Si pones los datos correctos, veras un mensaje verde de bienvenida. Si te equivocas, veras un mensaje rojo de error.

Como funciona todo junto?

Vamos a entender el flujo completo:

  1. El usuario escribe su usuario y contraseña en el formulario (login.html)
  2. Al hacer clic en “Entrar”, el JavaScript del HTML llama a window.api.login()
  3. El preload.js recibe esa llamada y la envia al proceso principal usando ipcRenderer.invoke
  4. El main.js recibe los datos, los compara con el usuario y contraseña guardados
  5. Devuelve un resultado (exito o error) que el HTML muestra como alerta
En resumen: HTML envia datos → preload.js los pasa → main.js los valida → devuelve respuesta → HTML la muestra.

Conceptos clave que aprendiste

  • Proceso principal (main process): Es el archivo main.js. Controla la ventana y tiene acceso completo a Node.js
  • Proceso de renderizado (renderer): Es el HTML que se muestra en la ventana. Solo puede usar JavaScript del navegador
  • Preload: Es el puente seguro entre ambos procesos
  • IPC (Inter-Process Communication): El sistema de mensajes que usa Electron para que ambos procesos se comuniquen

Conclusion

Acabas de crear tu primera aplicacion de escritorio con Electron. Con solo 4 archivos tienes un login funcional con una interfaz bonita gracias a Bootstrap.

A partir de aqui puedes mejorar el proyecto:

  • Conectar el login a una base de datos real
  • Agregar una pantalla de bienvenida despues del login
  • Guardar sesiones con localStorage
  • Empaquetar la app como un .exe con electron-builder

Recuerda: programar es facil si lo haces paso a paso.

Deja una respuesta