Pasos para instalacion de electron y electron Builder con instalador y portabilidad


PARTE 1 — Preparar la carpeta del proyecto

Tu carpeta está aquí:
📁 C:\Users\migue\Desktop\MyStand

En esa carpeta solo deben existir estos archivos:

✔ index.html
✔ main.js
✔ preload.js (si lo usas)
✔ package.json (lo crearemos de cero)
✔ LICENSE.txt (si quieres usarlo en NSIS)

👉 Elimina cualquier archivo:

  • builder-config.json
  • builder-config.yml
  • build/ (si no tiene nada importante)
  • iconos (si los tuvieras, pero dices que no usarás)

PARTE 2 — Instalar Electron desde cero

  1. Abre CMD o PowerShell
  2. Entra en la carpeta del proyecto:
cd C:\Users\migue\Desktop\MyStand
  1. Inicializa el proyecto:
npm init -y
  1. Instala Electron:
npm install electron --save-dev

PARTE 3 — Instalar el generador de instaladores (electron-builder)

npm install electron-builder --save-dev

Listo.
Ahora ya tienes lo básico para ejecutar y construir instaladores.


PARTE 4 — Crear el package.json COMPLETAMENTE LIMPIO

Copia y pega este package.json EXACTO:

{
  "name": "MyStand",
  "version": "1.0.0",
  "description": "Gestion Comercial",
  "main": "main.js",
  "type": "commonjs",

  "scripts": {
    "start": "electron .",
    "dist": "electron-builder",
    "dist:win": "electron-builder --win",
    "dist:installer": "electron-builder --win nsis",
    "dist:portable": "electron-builder --win portable",
    "dist:zip": "electron-builder --win zip"
  },

  "build": {
    "appId": "com.totumsoft.mystand",
    "productName": "MyStand",

    "directories": {
      "output": "dist"
    },

    "files": [
      "**/*",
      "!*.log",
      "!Thumbs.db"
    ],

    "win": {
      "target": [
        "nsis",
        "portable",
        "zip"
      ]
    },

    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "MyStand",
      "uninstallDisplayName": "MyStand",
      "license": "LICENSE.txt"
    },

    "portable": {
      "artifactName": "MyStand-Portable.exe"
    }
  },

  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.13.3"
  }
}

✔ SIN iconos
✔ SIN builder-config.json
✔ Instalador EXE
✔ Portable
✔ ZIP
✔ Limpio y compatible


PARTE 5 — Ejecutar la app

En consola:

npm start

PARTE 6 — Generar instaladores

🔹 EXE instalable “Next, Next, Install”

npm run dist:installer

Te generará algo como:

MyStand Setup 1.0.0.exe

🔹 Portable (se ejecuta sin instalar)

npm run dist:portable

Genera:

MyStand-Portable.exe

🔹 ZIP comprimido

npm run dist:zip

Genera:

MyStand-1.0.0-win.zip

🚀 LISTO!

Con esto tienes:

✔ Instalador EXE
✔ Portable
✔ ZIP
✔ Configuración perfecta
✔ Sin archivos de más
✔ Sin iconos
✔ Sin certificados


Si quieres, ahora puedo:

✅ Revisar tu main.js
✅ Revisar tu index.html
✅ Preparar tu preload.js
✅ Explicarte cómo añadir actualizaciones manuales sin firma

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *