Empaquetage de votre application Electron pour la distribution

Ce guide vous montre comment créer un package MSIX pour distribuer votre application Electron avec des API Windows.

Prerequisites

Avant d’empaqueter, assurez-vous d’avoir :

Préparer l’empaquetage

Configurez Electron Forge pour exclure les fichiers temporaires de la build finale. Ajoutez un ignore tableau dans votre packagerConfig à 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
};

Important

Vérifiez que vos Package.appxmanifest correspondances avec votre structure d’application empaquetée sont les suivantes :

  • L’attribut Executable doit pointer vers le fichier .exe correct dans votre sortie empaquetée

Générer un certificat de développement

Avant de créer un package MSIX signé, générez un certificat de développement :

npx winapp cert generate

Cela crée un devcert.pfx fichier à la racine de votre projet qui sera utilisé pour signer le package MSIX.

Options d’empaquetage

Vous avez deux options pour créer un package MSIX pour votre application Electron :

  1. Option 1 : Utilisation directe de l’interface CLI winapp - Plus configurable, fonctionne avec n’importe quel packager
  2. Option 2 : Utilisation d’Electron Forge MSIX Maker - Plus intégré au flux de travail Forge

Choisissez l’option qui convient le mieux à votre flux de travail.

Cette approche vous donne plus de contrôle sur le processus d’empaquetage et fonctionne avec n’importe quel packager Electron.

Créez votre application Electron

Pour empaqueter votre application Electron avec MSIX, nous devons d’abord créer la disposition de production. Avec Electron Forge, nous pouvons utiliser la commande de package :

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

Cela crée une version de production de votre application dans le ./out/ dossier. Le nom exact du dossier dépend du nom et de l’architecture de votre application (par exemple my-windows-app-win32-x64).

Créer le package MSIX

Utilisez maintenant l’interface CLI winapp pour créer et signer un package MSIX à partir de votre application empaquetée :

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

Remplacez <your-app-folder> par le nom de dossier réel créé par Electron Forge (par exemple, my-windows-app-win32-x64 pour x64 ou my-windows-app-win32-arm64 ARM64).

L’option --manifest est facultative. S’il n’est pas fourni, il recherche un Package.appxmanifest dans le dossier en cours d’empaquetage ou dans le répertoire actif.

L’option --cert est également facultative. S’il n’est pas fourni, le msix ne sera pas signé.

L’option --output est également facultative. Si le répertoire n'est pas fourni, le répertoire en cours sera utilisé.

Le package MSIX sera créé en tant que ./out/<your-app-name>.msix.

Conseil / Astuce

Vous pouvez ajouter ces commandes à vos package.json scripts pour des raisons pratiques :

{
  "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"
  }
}

Veillez simplement à mettre à jour le chemin d’accès pour qu’il corresponde au nom de votre dossier de sortie réel.

Option 2 : Utilisation d’Electron Forge MSIX Maker (pour les utilisateurs de Forge)

Si vous utilisez déjà Electron Forge, vous pouvez intégrer l’empaquetage MSIX directement dans le flux de travail Forge à l’aide du @electron-forge/maker-msix générateur.

Installer le MSIX Maker

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

Configurer forge.config.js

Ajoutez le MSIX Maker à votre 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
};

Mettre à jour Package.appxmanifest

Le fabricant Electron Forge MSIX utilise une disposition de dossier différente de l’approche CLI winapp. Il place votre application dans un app\ dossier dans MSIX. Ce dossier est créé automatiquement pendant l’empaquetage . Vous n’avez pas besoin de le créer vous-même. Mettez à jour le chemin d’accès Executable dans votre Package.appxmanifest pour qu'il pointe vers le dossier app :

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

Remplacez par my-app.exe votre nom exécutable réel. Cela est basé sur le productName champ (ou name) de votre package.json.

Note

Le générateur Forge MSIX recherche les outils de Windows SDK basés sur le MinVersion dans votre Package.appxmanifest. Si vous recevez une erreur concernant WindowsKit introuvable, vérifiez que la version du KIT SDK spécifiée est MinVersion installée sur votre ordinateur ou que vous effectuez une mise à jour MinVersion pour qu’elle corresponde à une version installée du SDK.

Créer le package MSIX

Vous pouvez maintenant créer le package MSIX. Utilisez l’indicateur --targets pour exécuter uniquement le créateur MSIX (sinon Forge exécutera tous les créateurs configurés) :

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

Le package MSIX est créé dans le ./out/make/msix/<arch>/ dossier (par exemple, ./out/make/msix/arm64/ ou ./out/make/msix/x64/).

Conseil / Astuce

Cette approche est plus intégrée au flux de travail Electron Forge et gère automatiquement l’empaquetage et la création MSIX en une seule étape.

Installer et tester MSIX

Tout d’abord, installez le certificat de développement (configuration unique) :

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

Installez maintenant le package MSIX. Double-cliquez sur le fichier msix ou exécutez la commande suivante :

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

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

Remplacez <your-app-name> et <arch> par les valeurs réelles de votre sortie de build.

Votre application s’affiche dans le menu Démarrer ! Lancez-la et testez vos fonctionnalités d’API Windows.

Options de distribution

Une fois que vous avez un package MSIX opérationnel, vous avez plusieurs options pour distribuer votre application :

Téléchargement direct

Hébergez le package MSIX sur votre site web pour le téléchargement direct. Assurez-vous de le signer avec un certificat de signature de code à partir d’une autorité de certification approuvée afin que les utilisateurs puissent l’installer sans avertissements de sécurité.

Microsoft Store

Envoyez votre application au Microsoft Store pour obtenir les mises à jour automatiques et de distribution les plus larges. Vous devrez :

  1. Créer un compte Microsoft Partner Center
  2. Réserver le nom de votre application
  3. Mettez à jour Package.appxmanifest avec votre identité du Windows Store. Il n’est pas nécessaire de signer le msix, le processus de publication du magasin le signe automatiquement.
  4. Envoyer pour la certification

En savoir plus : Publier votre application dans le Microsoft Store

Distribution d’entreprise

Distribuez directement aux clients d’entreprise via :

  • Portail d'entreprise - Pour les organisations utilisant Intune
  • Téléchargement direct - Héberger MSIX sur votre site web
  • Chargement indépendant - Installer via PowerShell ou App Installer

En savoir plus : Distribuer des applications en dehors du Windows Store

Programme d’installation d’applications

Créez un .appinstaller fichier pour les mises à jour automatiques :

<?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>

En savoir plus : Vue d’ensemble du fichier du programme d’installation d’application

Prochaines étapes

Félicitations! Vous avez correctement empaqueté votre application Electron Windows pour la distribution ! 🎉

Ressources additionnelles

Retour à la vue d’ensemble

Obtenir de l’aide

Bonne distribution ! 🚀

  • Last updated on