Empaquetado de la aplicación Electron para la distribución

En esta guía se muestra cómo crear un paquete MSIX para distribuir la aplicación Electron con las API de Windows.

Prerrequisitos

Antes de empaquetar, asegúrese de que tiene:

Preparación para el empaquetado

Configure Electron Forge para excluir los archivos temporales de la compilación final. Agregue un ignore array a packagerConfig en forge.config.js

module.exports = {
  packagerConfig: {
    asar: true,
    ignore: [
      /^\/\.winapp($|\/)/,     // SDK packages and headers
      /^\/winapp\.yaml$/,       // SDK config
      /\.pfx$/,                 // Certificate files
      /\.pdb$/,                 // Debug symbols
      /\/obj($|\/)/,            // C# build artifacts
      /\/bin($|\/)/,            // C# build artifacts
      /\.msix$/                 // MSIX packages
    ]
  },
  // ... rest of your config
};

Importante

Compruebe que Package.appxmanifest coincide con la estructura de la aplicación empaquetada:

  • El Executable atributo debe apuntar al archivo de .exe correcto en la salida empaquetada.

Generación de un certificado de desarrollo

Antes de crear un paquete MSIX firmado, genere un certificado de desarrollo:

npx winapp cert generate

Esto crea un devcert.pfx archivo en la raíz del proyecto que se usará para firmar el paquete MSIX.

Opciones de empaquetado

Tiene dos opciones para crear un paquete MSIX para la aplicación Electron:

  1. Opción 1: Uso directo de la CLI de winapp : más configurable, funciona con cualquier empaquetador
  2. Opción 2: Uso de Electron Forge MSIX Maker: más integrado en el flujo de trabajo de Forge

Elija la opción que mejor se adapte al flujo de trabajo.

Este enfoque proporciona más control sobre el proceso de empaquetado y funciona con cualquier empaquetador de Electron.

Crea tu aplicación Electron

Para empaquetar la aplicación Electron con MSIX, primero es necesario crear el diseño de producción. Con Electron Forge, podemos usar el comando package:

# Package with Electron Forge (or your preferred packager)
npx electron-forge package

Esto creará una versión de producción de la aplicación en la ./out/ carpeta . El nombre exacto de la carpeta dependerá del nombre de la aplicación y la arquitectura (por ejemplo, my-windows-app-win32-x64).

Creación del paquete MSIX

Ahora use la CLI de winapp para crear y firmar un paquete MSIX desde la aplicación empaquetada:

npx winapp pack .\out\<your-app-folder> --output .\out --cert .\devcert.pfx --manifest .\Package.appxmanifest

Reemplace <your-app-folder> por el nombre de carpeta real creado por Electron Forge (por ejemplo, my-windows-app-win32-x64 para x64 o my-windows-app-win32-arm64 para ARM64).

La --manifest opción es opcional. Si no se proporciona, buscará un Package.appxmanifest en la carpeta que se va a empaquetar o en el directorio actual.

La --cert opción también es opcional. Si no se proporciona, el paquete msix no se firmará.

La --output opción también es opcional. Si no se proporciona, se usará el directorio actual.

El paquete MSIX se creará como ./out/<your-app-name>.msix.

Sugerencia

Puede agregar estos comandos a los package.json scripts para mayor comodidad:

{
  "scripts": {
    "package-msix": "npm run build-csAddon && npx electron-forge package && npx winapp pack ./out/my-windows-app-win32-x64 --output ./out --cert ./devcert.pfx --manifest Package.appxmanifest"
  }
}

Solo tiene que asegurarse de actualizar la ruta de acceso para que coincida con el nombre de la carpeta de salida real.

Opción 2: Uso de Electron Forge MSIX Maker (para usuarios de Forge)

Si ya está utilizando Electron Forge, puede integrar el empaquetado MSIX directamente en el flujo de trabajo de Forge usando el @electron-forge/maker-msix maker.

Instalación de MSIX Maker

npm install --save-dev @electron-forge/maker-msix

Configuración de forge.config.js

Añada el MSIX Maker a forge.config.js.

module.exports = {
  // ... other config
  makers: [
    {
      name: '@electron-forge/maker-msix',
      config: {
        appManifest: '.\\Package.appxmanifest',
        windowsSignOptions: {
          certificateFile: '.\\devcert.pfx',
          certificatePassword: 'password'
        }
      }
    }
  ],
  // ... rest of your config
};

Actualizar Package.appxmanifest

Electron Forge MSIX maker usa un diseño de carpeta diferente al enfoque de la CLI de winapp. Coloca la aplicación dentro de una app\ carpeta en MSIX. Esta carpeta se crea automáticamente durante el empaquetado; no es necesario crearla usted mismo. Actualice la Executable ruta de acceso en su Package.appxmanifest para que apunte a la carpeta app.

<Applications>
  <Application Id="myApp"
    Executable="app\my-app.exe"
    EntryPoint="Windows.FullTrustApplication">
    <!-- ... rest of your application config -->
  </Application>
</Applications>

Reemplace my-app.exe con el nombre real de su archivo ejecutable. Esto se basa en el campo productName (o el campo name) de su package.json.

Nota:

Forge MSIX maker busca herramientas de SDK de Windows basadas en la MinVersion en la Package.appxmanifest. Si recibe un error indicando que WindowsKit no se encuentra, asegúrese de que la versión del SDK especificada en MinVersion esté instalada en su máquina, o actualice MinVersion para que coincida con una versión del SDK ya instalada.

Creación del paquete MSIX

Ahora puede crear el paquete MSIX. Use la --targets marca para ejecutar solo el creador de MSIX (de lo contrario, Forge ejecutará todos los creadores configurados):

npx electron-forge make --targets @electron-forge/maker-msix

El paquete MSIX se creará en la ./out/make/msix/<arch>/ carpeta (por ejemplo, ./out/make/msix/arm64/ o ./out/make/msix/x64/).

Sugerencia

Este enfoque está más integrado con el flujo de trabajo de Electron Forge y controla automáticamente el empaquetado y la creación de MSIX en un solo paso.

Instalación y prueba de MSIX

En primer lugar, instale el certificado de desarrollo (configuración única):

# Run as Administrator:
npx winapp cert install .\devcert.pfx

Ahora instale el paquete MSIX. Haga doble clic en el archivo msix o ejecute el siguiente comando:

# Option 1 output:
Add-AppxPackage .\out\<your-app-name>.msix

# Option 2 output:
Add-AppxPackage .\out\make\msix\<arch>\<your-app-name>.msix

Reemplace <your-app-name> y <arch> por los valores reales de la salida de compilación.

La aplicación aparecerá en el menú Inicio. Inícielo y pruebe las características de la API de Windows.

Opciones de distribución

Una vez que tenga un paquete MSIX en funcionamiento, tiene varias opciones para distribuir la aplicación:

Descarga directa

Hospede el paquete MSIX en su sitio web para descarga directa. Asegúrese de firmarlo con un certificado de firma de código de una entidad de certificación (CA) de confianza para que los usuarios puedan instalarlo sin advertencias de seguridad.

Microsoft Store

Envíe la aplicación al Microsoft Store para obtener la distribución más amplia y las actualizaciones automáticas. Necesitarás:

  1. Creación de una cuenta de Microsoft Partner Center
  2. Reservar el nombre de la aplicación
  3. Actualice Package.appxmanifest con su identidad de tienda. No es necesario firmar msix, el proceso de publicación de la tienda lo firmará automáticamente.
  4. Enviar para la certificación

Más información: Publicar la aplicación en el Microsoft Store

Distribución empresarial

Distribuir directamente a los clientes empresariales a través de:

  • Portal de empresa: para organizaciones que usan Intune
  • Descarga directa : hospedar msix en su sitio web
  • Carga lateral - Instalación mediante PowerShell o Instalador de Aplicaciones

Más información: Distribuir aplicaciones fuera de la Tienda

Instalador de aplicación

Cree un .appinstaller archivo para actualizaciones automáticas:

<?xml version="1.0" encoding="utf-8"?>
<AppInstaller
    Uri="https://your-domain.com/packages/myapp.appinstaller"
    Version="1.0.0.0"
    xmlns="http://schemas.microsoft.com/appx/appinstaller/2017/2">
    <MainPackage
        Name="YourAppName"
        Version="1.0.0.0"
        Publisher="CN=YourPublisher"
        Uri="https://your-domain.com/packages/myapp.msix"
        ProcessorArchitecture="x64" />
    <UpdateSettings>
        <OnLaunch HoursBetweenUpdateChecks="24" />
    </UpdateSettings>
</AppInstaller>

Más información: Información general sobre el archivo del instalador de aplicación

Pasos siguientes

¡Enhorabuena! Ha empaquetado correctamente la aplicación Electron habilitada para Windows para su distribución. 🎉

Recursos adicionales

Volver a Información general

Obtener ayuda

¡Feliz distribución! 🚀

  • Last updated on