🚀 Tutorial para Crear Ejecutable Permanente

Te guío paso a paso para convertir tu aplicación en un archivo .exe que puedas instalar y usar sin necesidad de la terminal.

📋 Paso 1: Preparar los Archivos

Asegúrate de tener esta estructura:

mi-aplicacion-condominio/
├── index.html
├── main.js
├── package.json
└── node_modules/

🔧 Paso 2: Actualizar package.json

Reemplaza TODO el contenido de tu package.json con esto:

{
  "name": "sistema-condominios",
  "version": "1.0.0",
  "description": "Sistema de Administración de Condominios",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win",
    "dist": "electron-builder"
  },
  "author": "Tu Nombre",
  "license": "MIT",
  "devDependencies": {
    "electron": "^22.0.0",
    "electron-builder": "^24.0.0"
  },
  "build": {
    "appId": "com.condominios.sistema",
    "productName": "Sistema Condominios",
    "directories": {
      "output": "dist-build"
    },
    "files": [
      "**/*",
      "!node_modules/electron-builder/**/*"
    ],
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64"]
        }
      ],
      "icon": "icon.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  }
}

📁 Paso 3: Crear un Icono (Opcional pero recomendado)

Crea un archivo icon.ico en tu carpeta principal. Si no tienes uno, puedes:

1. Buscar «icon.ico» en Google y descargar uno gratis
2. O usar un convertidor online de PNG a ICO
3. O saltarte este paso (la app tendrá icono por defecto)

⚡ Paso 4: Instalar electron-builder

En la terminal, ejecuta:

cd Desktop/mi-aplicacion-condominio
npm install --save-dev electron-builder

Espera a que termine la instalación (puede tomar 2-5 minutos).

🏗 Paso 5: Construir el Ejecutable

Ejecuta este comando en la terminal:

npm run build

⚠️ IMPORTANTE: Esto puede tomar 5-15 minutos. No cierres la terminal.

📦 Paso 6: Encontrar tu Ejecutable

Una vez terminado, busca en tu carpeta:

mi-aplicacion-condominio/
├── dist-build/
│   ├── Sistema Condominios Setup 1.0.0.exe  ← ¡TU INSTALADOR!
│   └── win-unpacked/                         ← Versión portable

🎯 Paso 7: Instalar y Usar tu Software

Opción A: Con Instalador (Recomendado)

1. Doble clic en Sistema Condominios Setup 1.0.0.exe
2. Sigue el asistente de instalación
3. Se creará un acceso directo en el Escritorio y Menú Inicio
4. ¡Listo! Puedes abrir tu app como cualquier programa

Opción B: Versión Portable

1. Ve a dist-build/win-unpacked/
2. Doble clic en Sistema Condominios.exe
3. Se abre directamente sin instalación

🛠 Solución de Problemas Comunes

Si sale error de memoria:

# En la terminal, antes de construir:
set NODE_OPTIONS=--max_old_space_size=4096
npm run build

Si tarda mucho:

• Es normal en la primera vez
• Electron-builder está descargando componentes necesarios

Si no encuentra archivos:

Asegúrate de que main.js tenga este contenido EXACTO:

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

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

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());

📝 Comandos Rápidos de Resumen:

# 1. Navegar a la carpeta
cd Desktop/mi-aplicacion-condominio

# 2. Instalar builder (una sola vez)
npm install --save-dev electron-builder

# 3. Construir el ejecutable
npm run build

# 4. Buscar el instalador en: dist-build/

🎉 ¡Y LISTO!

Tendrás:

• ✅ Un instalador .exe profesional
• ✅ Accesos directos en Escritorio y Menú Inicio
• ✅ Software que puedes distribuir a otras personas
• ✅ Sin necesidad de terminal para usar

📦 Instrucciones ESPECÍFICAS para Instalar Electron-Builder

🔧 Paso 1: Abrir Terminal y Navegar

cd Desktop/mi-aplicacion-condominio

⚡ Paso 2: Instalar Electron-Builder

Ejecuta este comando EXACTO:

npm install --save-dev electron-builder

📊 Paso 3: Verificar la Instalación

Comando para verificar:

npm list electron-builder

✅ Debe mostrar algo como:

mi-aplicacion-condominio@1.0.0 C:\Users\migue\Desktop\mi-aplicacion-condominio
└── electron-builder@24.0.0

🔍 Paso 4: Verificar en package.json

Ejecuta:

type package.json

Debe incluir en «devDependencies»:

"devDependencies": {
  "electron": "^22.0.0",
  "electron-builder": "^24.0.0"
}

🛠 Si Encuentras Problemas:

Opción A: Instalación Forzada

npm install --save-dev electron-builder --force

Opción B: Limpiar y Reinstalar

# Eliminar node_modules y reinstalar todo
rmdir /s node_modules
del package-lock.json
npm install
npm install --save-dev electron-builder

Opción C: Instalar Versión Específica

npm install --save-dev electron-builder@24.0.0

⏳ ¿Qué Debe Suceder?

Durante la instalación verás:

npm WARN deprecated ... (algunas advertencias - son normales)
added 125 packages, and audited 126 packages in 45s

Tiempo estimado: 1-5 minutos

✅ Verificación Final

Ejecuta estos comandos para confirmar:

# Verificar que electron-builder está instalado
npm list electron-builder

# Verificar que puede ejecutarse
npx electron-builder --version

Debe mostrar: 24.0.0 o similar

🚨 Posibles Errores y Soluciones:

Error: «npm no se reconoce»

• Node.js no está instalado correctamente
• Solución: Reinstalar Node.js desde nodejs.org

Error: Permisos denegados

# Ejecutar como administrador o:
npm cache clean --force
npm install --save-dev electron-builder

Error: Timeout o red

# Configurar registro alternativo
npm install --save-dev electron-builder --registry https://registry.npmjs.org/

📝 Comandos Rápidos de Resumen:

# 1. Navegar
cd Desktop/mi-aplicacion-condominio

# 2. Instalar
npm install --save-dev electron-builder

# 3. Verificar
npm list electron-builder

# 4. Listar archivos
dir

🎯 ¿Qué Hacer Después?

Una vez instalado electron-builder correctamente, podrás ejecutar:

npm run build

¿Puedes ejecutar el comando de instalación y decirme qué resultado obtienes?

📋 PRIMERA PARTE: Preparación Inicial

Paso 1: Verificar Estructura Actual

En la terminal ejecuta:

cd Desktop/mi-aplicacion-condominio
dir

Debes tener:

index.html
main.js
package.json
node_modules/ (carpeta)

Paso 2: Crear package.json CORREGIDO

Reemplaza TODO el contenido de package.json con:

{
  "name": "sistema-condominios",
  "version": "1.0.0",
  "description": "Sistema de Administración de Condominios",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "author": "Tu Nombre",
  "license": "MIT",
  "devDependencies": {
    "electron": "^22.0.0",
    "electron-builder": "^24.0.0"
  },
  "build": {
    "appId": "com.condominios.app",
    "productName": "Sistema Condominios",
    "directories": {
      "output": "dist-final"
    },
    "files": [
      "**/*"
    ],
    "win": {
      "target": "nsis",
      "icon": ""
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  }
}

Paso 3: Verificar main.js

Asegúrate de que main.js tenga este contenido EXACTO:

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

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

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());

---

🔧 SEGUNDA PARTE: Instalar Dependencias

Paso 4: Instalar electron-builder

cd Desktop/mi-aplicacion-condominio
npm install --save-dev electron-builder

⏳ Espera a que termine completamente.

Paso 5: Verificar Instalación

npm list electron-builder

Debe mostrar la versión instalada.

---

🏗 TERCERA PARTE: Construir el Ejecutable

Paso 6: Ejecutar Construcción

npm run build

⚠️ IMPORTANTE:

• ⏳ Puede tomar 5-15 minutos
• 🚫 No cierres la terminal
• 📊 Verás muchos mensajes – es normal

Paso 7: Monitorear el Proceso

Durante la construcción verás:

* packaging       platform=win32 arch=x64 electron=...
* building        target=nsis file=dist-final\Sistema Condominios Setup 1.0.0.exe
* building        target=nsis file=dist-final\Sistema Condominios Setup 1.0.0.exe

---

📦 CUARTA PARTE: Verificar Resultado

Paso 8: Comprobar Archivos Creados

dir dist-final

✅ Debes ver:

dist-final/
├── Sistema Condominios Setup 1.0.0.exe
└── win-unpacked/
    ├── Sistema Condominios.exe
    ├── resources/
    └── ... (otros archivos)

Paso 9: Probar el Ejecutable

Opción A: Instalador (Recomendado)

1. Doble clic en Sistema Condominios Setup 1.0.0.exe
2. Sigue el asistente de instalación
3. ✅ Se crea acceso directo en Escritorio
4. ✅ Se agrega al Menú Inicio

Opción B: Versión Portable

1. Ve a dist-final/win-unpacked/
2. Doble clic en Sistema Condominios.exe
3. ✅ Se abre directamente sin instalación

---

🛠 QUINTA PARTE: Solución de Problemas

Si aparece ERROR de memoria:

# En Windows CMD:
set NODE_OPTIONS=--max_old_space_size=4096
npm run build

# En PowerShell:
$env:NODE_OPTIONS="--max_old_space_size=4096"
npm run build

Si tarda MUCHO tiempo:

• Es normal en la primera ejecución
• Electron-builder descarga componentes necesarios
• Las siguientes construcciones serán más rápidas

Si falla la construcción:

# Limpiar todo y reinstalar
rmdir /s node_modules
del package-lock.json
npm install
npm run build

---

✅ LISTA DE VERIFICACIÓN FINAL

Antes de ejecutar npm run build, confirma:

• [ ] package.json tiene el contenido correcto
• [ ] main.js carga index.html correctamente
• [ ] index.html está en la misma carpeta
• [ ] electron-builder está instalado
• [ ] NO hay archivo icon.ico problemático
• [ ] Tienes 5-15 minutos disponibles

---

🎉 RESULTADO FINAL ESPERADO

Al terminar exitosamente tendrás:

1. 📦 Sistema Condominios Setup 1.0.0.exe – Instalador profesional
2. 🚀 Sistema Condominios.exe – Versión portable
3. 🏠 Acceso directo en el Escritorio
4. 📋 Entrada en el Menú Inicio
5. ✅ Software 100% funcional sin necesidad de terminal

---

¿Estás listo para ejecutar el comando npm run build?

Ejecuta estos comandos en orden:

cd Desktop/mi-aplicacion-condominio
npm run build