Impacchettare l'app Electron per la distribuzione

Questa guida illustra come creare un pacchetto MSIX per distribuire l'app Electron con le API di Windows.

Prerequisiti

Prima di imballare, accertati di:

Preparare per l'imballaggio

Configurare Electron Forge per escludere i file temporanei dalla build finale. Aggiungere una matrice all'oggetto ignorepackagerConfig in 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

Verificare che il Package.appxmanifest corrisponda alla struttura dell'applicazione confezionata.

  • L'attributo Executable deve puntare al file di .exe corretto nell'output in pacchetto

Generare un certificato di sviluppo

Prima di creare un pacchetto MSIX firmato, generare un certificato di sviluppo:

npx winapp cert generate

Verrà creato un devcert.pfx file nella radice del progetto che verrà usato per firmare il pacchetto MSIX.

Opzioni di creazione pacchetti

Sono disponibili due opzioni per la creazione di un pacchetto MSIX per l'app Electron:

  1. Opzione 1: Uso diretto dell'interfaccia della riga di comando di Winapp : più configurabile, funziona con qualsiasi packager
  2. Opzione 2: Uso di Electron Forge MSIX Maker - Più integrato nel flusso di lavoro Forge

Scegliere l'opzione più adatta al flusso di lavoro.

Questo approccio offre un maggiore controllo sul processo di imballaggio e funziona con qualsiasi packager Electron.

Sviluppa la tua app Electron

Per creare un pacchetto dell'app Electron con MSIX, è necessario innanzitutto creare il layout di produzione. Con Electron Forge è possibile usare il comando package:

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

Verrà creata una versione di produzione dell'app nella ./out/ cartella . Il nome esatto della cartella dipenderà dal nome e dall'architettura dell'app , ad esempio my-windows-app-win32-x64.

Creare il pacchetto MSIX

Usare ora l'interfaccia della riga di comando di winapp per creare e firmare un pacchetto MSIX dall'app in pacchetto:

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

Sostituire <your-app-folder> con il nome effettivo della cartella creato da Electron Forge (ad esempio, my-windows-app-win32-x64 per x64 o my-windows-app-win32-arm64 per ARM64).

L'opzione --manifest è facoltativa. Se non specificato, cercherà package.appxmanifest nella cartella in pacchetto o nella directory corrente.

L'opzione --cert è anche facoltativa. Se non specificato, il msix non verrà firmato.

L'opzione --output è anche facoltativa. Se non specificato, verrà utilizzata la directory corrente.

Il pacchetto MSIX verrà creato come ./out/<your-app-name>.msix.

Suggerimento

È possibile aggiungere questi comandi agli package.json script per praticità:

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

Assicurarsi di aggiornare il percorso in modo che corrisponda al nome effettivo della cartella di output.

Opzione 2: Electron Forge MSIX Maker (per utenti Forge)

Se si sta già utilizzando Electron Forge, è possibile integrare la creazione di pacchetti MSIX direttamente nel flusso di lavoro Forge utilizzando il maker @electron-forge/maker-msix.

Installare MSIX Maker

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

Configurare forge.config.js

Aggiungi MSIX Maker al tuo 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
};

Aggiorna Package.appxmanifest

Electron Forge MSIX Maker usa un layout di cartella diverso rispetto all'approccio dell'interfaccia della riga di comando di Winapp. Posiziona l'app all'interno di una app\ cartella in MSIX. Questa cartella viene creata automaticamente durante la creazione dei pacchetti. Non è necessario crearla manualmente. Aggiorna il percorso Executable nel Package.appxmanifest in modo che punti alla cartella app:

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

Sostituire my-app.exe con il nome eseguibile effettivo. Questa operazione si basa sul campo productName (o name) nel tuo package.json.

Annotazioni

Forge MSIX maker cerca gli strumenti Windows SDK in base al MinVersion nel Package.appxmanifest. Se viene visualizzato un errore relativo a WindowsKit non trovato, verificare che la versione dell'SDK specificata in MinVersion sia installata nel computer o aggiornare MinVersion in modo che corrisponda a una versione installata dell'SDK.

Creare il pacchetto MSIX

È ora possibile creare il pacchetto MSIX. Usare il --targets flag per eseguire solo MSIX Maker (in caso contrario Forge eseguirà tutti i creatori configurati):

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

Il pacchetto MSIX verrà creato nella ./out/make/msix/<arch>/ cartella (ad esempio, ./out/make/msix/arm64/ o ./out/make/msix/x64/).

Suggerimento

Questo approccio è più integrato con il flusso di lavoro Electron Forge e gestisce automaticamente la creazione di pacchetti e MSIX in un unico passaggio.

Installare e testare MSIX

Prima di tutto, installare il certificato di sviluppo (configurazione una tantum):

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

Installare ora il pacchetto MSIX. Fare doppio clic sul file msix o eseguire il comando seguente:

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

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

Sostituire <your-app-name> e <arch> con i valori effettivi dell'output di compilazione.

L'app verrà visualizzata nel menu Start. Avviarlo e testare le funzionalità dell'API Windows.

Opzioni di distribuzione

Dopo aver creato un pacchetto MSIX funzionante, sono disponibili diverse opzioni per la distribuzione dell'app:

Download diretto

Ospitare il pacchetto MSIX nel sito Web per il download diretto. Assicurarsi di firmarlo con un certificato di firma del codice da un'autorità di certificazione attendibile (CA) in modo che gli utenti possano installarlo senza avvisi di sicurezza.

Microsoft Store

Inviare l'app al Microsoft Store per la distribuzione più ampia e gli aggiornamenti automatici. È necessario:

  1. Creare un account Microsoft Partner Center
  2. Riserva il nome dell'app
  3. Aggiorna Package.appxmanifest con l'identità del negozio. Non è necessario firmare msix, il processo di pubblicazione dello Store lo firmerà automaticamente.
  4. Inviare per la certificazione

Altre informazioni: Pubblicare l'app nel Microsoft Store

Distribuzione aziendale

Distribuire direttamente ai clienti aziendali tramite:

  • Portale aziendale - Per le organizzazioni che usano Intune
  • Download diretto - Ospitare MSIX nel sito Web
  • Sideloading - Esegui l'installazione tramite PowerShell o App Installer

Altre informazioni: Distribuire app all'esterno dello Store

Installatore di app

Creare un .appinstaller file per gli aggiornamenti automatici:

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

Per saperne di più: Panoramica del file del programma di installazione

Operazioni successive

Complimenti. Hai confezionato con successo la tua app Electron compatibile con Windows per la distribuzione! 🎉

Risorse aggiuntive

Ritorna alla Panoramica

Ottenere informazioni

Buona distribuzione! 🚀

  • Last updated on