Empaqueter votre application
Ceci est la partie 5 du tutoriel Electron.
Objectifs
Dans cette partie du tutoriel, nous allons passer en revue les bases de l’empaquetage et de la distribution d'une application avec Electron Forge .
Utilisation d’Electron Forge
Electron n’inclut pas , dans ses modules de base, d’outil pour empaqueter et distribuer votre application. Une fois que votre application Electron est fonctionnelle en mode développement, vous allez devoir utiliser des outils supplémentaires pour créer une application packagée distribuable à vos utilisateurs (ce que l'on apelle communément un livrable ). De tels livrables peuvent être soit des programmes d’installation (par exemple.MSI sous Windows) soit des fichiers exécutables portables (par exemple, .app sur macOS).
Electron Forge est un outil tout-en-un gèrant l'empaquetage et la distribution des applications Electron. Sous le capot, il combine de nombreux outils Electron existants (par exemple, @electron/packager, @electron/osx-sign, electron-winstaller, etc.) sous une seule interface afin que vous n’ayez pas à vous soucier de leurs interconnexions.
Importation de votre projet dans Forge
Vous pouvez installer le CLI d'Electron Forge dans la section devDependencies de votre projet et importer votre projet existant avec un script de conversion très pratique.
- npm
- Yarn
npm install --save-dev @electron-forge/cli
npx electron-forge import
yarn add --dev @electron-forge/cli
npx electron-forge import
Une fois le script de conversion terminé, Forge devrait avoir ajouté plusieurs scripts à votre fichier package.json .
//...
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
//...
Pour plus d'informations sur make et d'autres API de Forge, consultez la documentation du CLI d'Electron Forge.
Vous remarquerez également que votre fichier package.json a maintenant quelques paquets supplémentaires installés sous devDependencies et un nouveau fichier forge.config.js qui exporte un objet de configuration. Vous devriez voir plusieurs "makers" (packages qui génèrent des distribuables regroupés) dans la configuration préremplie, avec un pour chaque plate-forme cible.
Création d’une distribution livrable
Pour créer un fichier distribuable, vous allez utiliser le nouveau script make de votre projet, qui exécutera la commande electron-forge make .
- npm
- Yarn
npm run make
yarn make
Cette commande make agit en deux temps:
- Elle exécutera d’abord sous le capot
electron-forge package, qui va regrouper le code de votre application avec le binaire d'Electron. Le code produit par ce paquetage est généré dans un dossier. - Ensuite ce dossier d'application empaqueté sera utilisé pour créer une distribution distincte pour chaque "maker" configuré.
Une fois le script exécuté, vous devriez voir un dossier out contenant à la fois le distribuable et un dossier contenant le code de l'application empaquetée.
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
Le distribuable dans le dossier out/make peut être démarré! Vous venez de créer votre première application Electron distribuable.
Electron Forge peut être configuré pour créer des distribuables sous différents formats spécifiques aux différents systèmes d'exploitation (par exemple, DMG, deb, MSI, etc.). Consultez la documentation des Makers pour voir toutes les options de configuration.
La définition d'icônes d'application personnalisées nécessite quelques ajouts à votre configuration. Consultez le tutoriel Les icônes avec Forge pour plus d'informations.
Si vous souhaitez empaqueter manuellement votre code, ou si vous souhaitez simplement comprendre les mécanismes derrière l’empaquetage d’une application Electron, consultez la documentation complète de Empaquetage des Applications .
Important : signer votre code
Pour la distribution d'applications de bureau aux utilisateurs finaux, nous recommandons fortement de signer le code de votre application Electron. La signature de code est une partie importante de la distribution des applications de bureau qui est obligatoire pour l’étape de mise à jour automatique que vous verrez dans la dernière partie du tutoriel.
La signature de code est une technologie de sécurité utilisée pour certifier qu'une application a bien été créée par une source clairement identifiée. Windows et macOS ont leur propre système de signature de code spécifique au système d’exploitation qui rendront difficile pour les utilisateurs de télécharger ou de lancer des applications non signées.
Sous macOS, la signature de code se fait au niveau de l’empaquetage de l’application. Sous Windows, ce sont les les programmes d’installation distribuables qui sont sont signés. Si vous disposez déjà de certificats de signature de code pour Windows et macOS, vous pouvez définir vos informations d’identification dans votre configuration Forge.
Pour plus d’informations sur la signature de code, consultez le guide Signature d’applications macOS dans la documentation Forge.
- macOS
- Windows
module.exports = {
packagerConfig: {
osxSign: {},
// ...
osxNotarize: {
tool: 'notarytool',
appleId: process.env.APPLE_ID,
appleIdPassword: process.env.APPLE_PASSWORD,
teamId: process.env.APPLE_TEAM_ID
}
// ...
}
}
module.exports = {
// ...
makers: [
{
name: '@electron-forge/maker-squirrel',
config: {
certificateFile: './cert.pfx',
certificatePassword: process.env.CERTIFICATE_PASSWORD
}
}
]
// ...
}
Récapitulatif
Les applications Electron doivent être empaquetées pour être distribuées aux utilisateurs. Dans ce tutoriel, vous avez importé votre application dans Electron Forge que vous avez configuré pour empaqueter votre application et générer des installateurs.
Pour que votre application soit approuvée par le système de l’utilisateur, vous devez, en signant le code, certifier numériquementque que le distribuable est authentique et non altéré . Votre application peut être signée via Forge une fois que vous l’avez configurée pour utiliser les informations de votre certificat de signature de code.