Empaquetar su aplicación

Sigue el tutorial

Esta es la parte 5 del tutorial de Electrón.

Objetivos de aprendizaje

En esta parte del tutorial, vamos a ver las bases de cómo empaquetar y distribuir la aplicación con Electron Forge.

Usar Electron Forge

Electron no tiene ninguna herramienta para empaquetar y distribuir ya incluida en sus módulos centrales. Una vez tenga una aplicación de Electron funcionando en modo desarrollador, necesita usar herramientas adicionales para crear una aplicación empaquetada que pueda distribuir a usuarios (también conocida como distribuible). Los distribuibles pueden ser o bien instaladores (e.g. MSI o Windows) o archivos ejecutables portátiles (e.g. .app en macOS).

Electron Forge es un todo en uno que gestiona el empaquetado y la distribución de las aplicaciones de Electron. Bajo el capó, combina un montón de herramientas de Electron (e.g. @electron/packager, @electron/osx-sign, electron-winstaller, etc.) en una solo interfaz para que no se tenga que preocuparse de conectarlas todas.

Importar su proyecto a Forge

Puede instalar el CLI de Electron Forge en las devDependencies de su proyecto e importar su proyecto existente con un práctico script de conversión.

npm
Yarn

npm install --save-dev @electron-forge/cli
npx electron-forge import

npm install --save-dev @electron-forge/cli
yarn dlx electron-forge import

Una vez el script de conversión haya acabado, Forge debería haber añadido unos cuantos scripts al archivo package.json.

package.json
  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...

documentación de CLI

Para más información sobre make y otras APIs de Forge, vea la documentación del CLI de Electron Forge.

También habrá visto que el package.json ahora tiene unos cuantos nuevos paquetes instalados bajo devDependencies, y un nuevo archivo forge.config.js que exporta un objeto de configuración. Debería ver distintos creadores (paquetes que generan conjuntos de aplicaciones distribuibles) en la configuración automáticamente rellenada, uno por cada plataforma objetivo.

Crear un distribuible

Para crear un distribuible, use el nuevo script make de su proyecto, el cual corre el comando electron-forge make.

npm
Yarn

npm run make

yarn make

Este comando make contiene dos pasos:

Primero correrá electron-forge package bajo el capó, lo cual unirá el código de su app junto con el binario de Electron. El código empaquetado se genera en una carpeta.
Después usará la carpeta de esta aplicación empaquetada para crear un distribuible distinto para cada creador configurado.

Después de que corra el script, debería ver una carpeta out que contenga ambos el distribuible y una carpeta que contenga el código de la aplicación empaquetada.

macOS output example
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

¡El distribuible en la carpeta out/make debería estar listo para ser ejecutado! Acaba de crear su primera aplicación de Electron empaquetada.

Formatos Distribuibles

Electron Forge puede ser configurado par crear distribuibles en diferentes formatos específicos a sistemas operativos (e.g. DMG, deb, MSI, etc.). Véase la documentación de Creadores de Forge para todas las opciones de configuración.

Crear y añadir iconos de aplicación

Configurar iconos de aplicación personalizados requiere añadir ciertas cosas a su configuración. Vea tutorial de iconos de Forge para más información.

Empaquetar sin Electron Forge

Si quiere empaquetar manualmente el código, o si simplemente está interesado en entender las mecánicas tras el proceso de empaquetar una aplicación Electron, vea la documentación Empaquetado de Aplicación al completo.

Importante: firmar su código

Para poder distribuir aplicaciones de escritorio a usuarios, recomendamos encarecidamente que firme el código de su aplicación Electron. Firmar un código es una parte importante de la distribución de aplicaciones de escritorio y es obligatorio para el paso de las actualizaciones automáticas en la parte final del tutorial.

Firmar un código es una tecnología de seguridad que se utiliza para certificar que una aplicación de escritorio ha sido creada por una fuente conocida. Windows y macOS tienen sus propios sistemas de firma de código específicos que dificultarán a los usuarios la descarga o ejecución de aplicaciones no firmadas.

En macOS, la firma del código se realiza durante el nivel de empaquetado de una aplicación. En Windows, los instaladores distribuibles se firman en su lugar. Si ya tiene certificados de firma de código para Windows y macOS, puede establecer sus credenciales en su configuración de Forge.

info

Para más información sobre la firma de códigos, vea la guía Firmando Aplicaciones macOS en la documentación de Forge.

macOS
Windows

forge.config.js
module.exports = {
  packagerConfig: {
    osxSign: {},
    // ...
    osxNotarize: {
      tool: 'notarytool',
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD,
      teamId: process.env.APPLE_TEAM_ID
    }
    // ...
  }
}

forge.config.js
module.exports = {
  // ...
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        certificateFile: './cert.pfx',
        certificatePassword: process.env.CERTIFICATE_PASSWORD
      }
    }
  ]
  // ...
}

Resumen

Las aplicaciones Electron necesitan ser empaquetadas para ser distribuidas a usuarios. En este tutorial, ha importado su aplicación a Electron Forge y lo ha configurado para empaquetar su aplicación y generar instaladores.

Para que su aplicación cuente con la confianza del sistema del usuario, debe certificar digitalmente que el distribuible es auténtico y que no está modificado a través de una firma digital. Puede firmar su aplicación a través de Forge una vez lo configure para usar la información del certificado de su firma digital.

Objetivos de aprendizaje​

Usar Electron Forge​

Importar su proyecto a Forge​

Crear un distribuible​

Importante: firmar su código​

Resumen​