Uw electron-app verpakken voor distributie

Deze handleiding laat zien hoe u een MSIX-pakket maakt voor het distribueren van uw Electron-app met Windows-API's.

Vereiste voorwaarden

Voordat u gaat verpakken, moet u ervoor zorgen dat u het volgende hebt:

Voorbereiden voor verpakking

Configureer Electron Forge om tijdelijke bestanden uit te sluiten van de uiteindelijke build. Voeg een ignore matrix toe aan uw packagerConfig 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
};

Belangrijk

Controleer of uw Package.appxmanifest overeenkomt met de geïntegreerde structuur van uw applicatiepakket.

  • Het Executable kenmerk moet verwijzen naar het juiste .exe-bestand in de verpakte uitvoer

Een ontwikkelingscertificaat genereren

Voordat u een ondertekend MSIX-pakket maakt, genereert u een ontwikkelingscertificaat:

npx winapp cert generate

Hiermee maakt u een devcert.pfx bestand in de hoofdmap van uw project dat wordt gebruikt om het MSIX-pakket te ondertekenen.

Verpakkingsopties

U hebt twee opties voor het maken van een MSIX-pakket voor uw Electron-app:

  1. Optie 1: Winapp CLI rechtstreeks gebruiken - Meer configureerbaar, werkt met elke packager
  2. Optie 2: Electron Forge MSIX Maker gebruiken - Meer geïntegreerd in de Forge-werkstroom

Kies de optie die het beste past bij uw werkstroom.


Deze aanpak geeft u meer controle over het verpakkingsproces en werkt met elke Electron packager.

Uw electron-app bouwen

Om uw Electron-app in te pakken met MSIX, moeten we eerst de productie-indeling maken. Met Electron Forge kunnen we de pakketopdracht gebruiken:

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

Hiermee maakt u een productieversie van uw app in de ./out/ map. De exacte mapnaam is afhankelijk van uw app-naam en -architectuur (bijvoorbeeld my-windows-app-win32-x64).

Het MSIX-pakket maken

Gebruik nu de winapp CLI om een MSIX-pakket te maken en te ondertekenen vanuit uw verpakte app:

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

Vervang door <your-app-folder> de werkelijke mapnaam die is gemaakt door Electron Forge (bijvoorbeeld my-windows-app-win32-x64 voor x64 of my-windows-app-win32-arm64 voor ARM64).

De --manifest optie is optioneel. Als dit niet is opgegeven, wordt gezocht naar een Package.appxmanifest in de map die wordt verpakt of in de huidige map.

De --cert optie is ook optioneel. Indien niet opgegeven, wordt de msix niet ondertekend.

De --output optie is ook optioneel. Als deze niet is opgegeven, wordt de huidige map gebruikt.

Het MSIX-pakket wordt gemaakt als ./out/<your-app-name>.msix.

Aanbeveling

U kunt deze opdrachten voor het gemak toevoegen aan uw package.json scripts:

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

Zorg ervoor dat u het pad bijwerkt zodat het overeenkomt met de werkelijke naam van de uitvoermap.


Optie 2: Electron Forge MSIX Maker gebruiken (voor Forge-gebruikers)

Als u Electron Forge al gebruikt, kunt u MSIX-pakketten rechtstreeks integreren in de Forge-werkstroom met behulp van de @electron-forge/maker-msix maker.

MSIX Maker installeren

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

forge.config.js configureren

Voeg de MSIX-maker toe aan uw 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
};

Package.appxmanifest bijwerken

De Electron Forge MSIX Maker maakt gebruik van een andere mapindeling dan de winapp CLI-benadering. Uw app wordt in een app\ map in de MSIX geplaatst. Deze map wordt automatisch gemaakt tijdens het verpakken. U hoeft deze niet zelf te maken. Werk het pad Executable in uw Package.appxmanifest bij zodat het naar de app map verwijst.

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

Vervang door my-app.exe de werkelijke naam van het uitvoerbare bestand. Dit is gebaseerd op het productName veld (of name) in uw package.json.

Opmerking

De Forge MSIX maker zoekt naar Windows SDK-tools op basis van de MinVersion in uw Package.appxmanifest. Als er een foutbericht wordt weergegeven dat WindowsKit niet wordt gevonden, controleert u of de SDK-versie die is opgegeven MinVersion op uw computer is geïnstalleerd of MinVersion werkt u bij zodat deze overeenkomt met een geïnstalleerde SDK-versie.

Het MSIX-pakket maken

U kunt nu het MSIX-pakket maken. Gebruik de --targets vlag om alleen de MSIX-maker uit te voeren (anders worden alle geconfigureerde makers door Forge uitgevoerd):

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

Het MSIX-pakket wordt gemaakt in de ./out/make/msix/<arch>/ map (bijvoorbeeld ./out/make/msix/arm64/ )../out/make/msix/x64/

Aanbeveling

Deze benadering is meer geïntegreerd met de Electron Forge-werkstroom en verwerkt automatisch pakketten en MSIX-creatie in één stap.

De MSIX installeren en testen

Installeer eerst het ontwikkelingscertificaat (eenmalige installatie):

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

Installeer nu het MSIX-pakket. Dubbelklik op het MSIX-bestand of voer de volgende opdracht uit:

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

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

Vervang <your-app-name> en <arch> door de werkelijke waarden uit uw build-uitvoer.

Uw app wordt weergegeven in het menu Start. Start deze en test uw Windows API-functies.

Distributieopties

Zodra u een werkend MSIX-pakket hebt, hebt u verschillende opties voor het distribueren van uw app:

Direct downloaden

Host het MSIX-pakket op uw website voor direct downloaden. Zorg ervoor dat u het met een certificaat voor ondertekening van programmacode van een vertrouwde certificeringsinstantie (CA) ondertekent, zodat gebruikers het kunnen installeren zonder beveiligingswaarschuwingen.

Microsoft Store

Dien uw app in bij de Microsoft Store voor de breedste distributie en automatische updates. U moet het volgende doen:

  1. Een Microsoft Partnercentrum-account maken
  2. Uw app-naam reserveren
  3. Werk Package.appxmanifest bij met uw Store-identiteit. Het is niet nodig om de msix te ondertekenen, het publicatieproces van de winkel ondertekent deze automatisch.
  4. Indienen voor certificering

Meer informatie: Uw app publiceren naar de Microsoft Store

Ondernemingsdistributie

Rechtstreeks distribueren naar zakelijke klanten via:

  • Bedrijfsportal : voor organisaties die Intune gebruiken
  • Direct downloaden - Host de MSIX op uw website
  • Sideloaden - Installeren via PowerShell of App-installatieprogramma

Meer informatie: Apps buiten de Store distribueren

App-installatieprogramma

Maak een .appinstaller bestand voor automatische updates:

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

Meer informatie: Overzicht van app-installatiebestand

Volgende stappen

Gefeliciteerd! U hebt uw Electron-app voor Windows met succes verpakt voor distributie! 🎉

Aanvullende informatiebronnen

Terug naar overzicht

Krijg hulp

Veel succes met distribueren! 🚀