Packaging Your Application | Electron Zum Hauptteil springen Electron Dokumentation API Blog Tools * Electron Forge * Elektro-Fiddle Community * Kontrolle * Showcase * Ressourcen Veröffentlichungen Deutsch * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 Suche * Loslegen * Einführung * Warum Electron * Tutorial * Vorrausetzungen * Building your First App * Using Preload Scripts * Adding Features * Packaging Your Application * Publishing and Updating * Prozesse in Electron * Bewährte Verfahren * Beispiele * Entwicklung * Native Node Modules * Distribution * Testen und Debuggen * References * Beitragen * * Loslegen * Tutorial * Packaging Your Application Auf dieser Seite Packaging Your Application Follow along the tutorial This is part 5 of the Electron tutorial. * Vorrausetzungen * Building your First App * Using Preload Scripts * Adding Features * Packaging Your Application * Publishing and Updating Learning goals ​ In this part of the tutorial, we'll be going over the basics of packaging and distributing your app with Electron Forge . Using Electron Forge ​ Electron does not have any tooling for packaging and distribution bundled into its core modules. Once you have a working Electron app in dev mode, you need to use additional tooling to create a packaged app you can distribute to your users (also known as a distributable ). Distributables can be either installers (e.g. MSI on Windows) or portable executable files (e.g. .app on macOS). Electron Forge is an all-in-one tool that handles the packaging and distribution of Electron apps. Under the hood, it combines a lot of existing Electron tools (e.g. @electron/packager , @electron/osx-sign , electron-winstaller , etc.) into a single interface so you do not have to worry about wiring them all together. Importing your project into Forge ​ You can install Electron Forge's CLI in your project's devDependencies and import your existing project with a handy conversion script. * npm * Yarn npm install --save-dev @electron-forge/cli npx electron-forge import yarn add --dev @electron-forge/cli yarn electron-forge import Once the conversion script is done, Forge should have added a few scripts to your package.json file. package.json //... "scripts" : { "start" : "electron-forge start" , "package" : "electron-forge package" , "make" : "electron-forge make" } , //... CLI documentation For more information on make and other Forge APIs, check out the Electron Forge CLI documentation . You should also notice that your package.json now has a few more packages installed under devDependencies , and a new forge.config.js file that exports a configuration object. You should see multiple makers (packages that generate distributable app bundles) in the pre-populated configuration, one for each target platform. Creating a distributable ​ To create a distributable, use your project's new make script, which runs the electron-forge make command. * npm * Yarn npm run make yarn make This make command contains two steps: * It will first run electron-forge package under the hood, which bundles your app code together with the Electron binary. The packaged code is generated into a folder. * It will then use this packaged app folder to create a separate distributable for each configured maker. After the script runs, you should see an out folder containing both the distributable and a folder containing the packaged application code. macOS output example 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 The distributable in the out/make folder should be ready to launch! You have now created your first bundled Electron application. Distributable formats Electron Forge can be configured to create distributables in different OS-specific formats (e.g. DMG, deb, MSI, etc.). See Forge's Makers documentation for all configuration options. Creating and adding application icons Setting custom application icons requires a few additions to your config. Check out Forge's icon tutorial for more information. Packaging without Electron Forge If you want to manually package your code, or if you're just interested understanding the mechanics behind packaging an Electron app, check out the full Application Packaging documentation. Important: signing your code ​ In order to distribute desktop applications to end users, we highly recommend that you code sign your Electron app. Code signing is an important part of shipping desktop applications, and is mandatory for the auto-update step in the final part of the tutorial. Code signing is a security technology that you use to certify that a desktop app was created by a known source. Windows and macOS have their own OS-specific code signing systems that will make it difficult for users to download or launch unsigned applications. On macOS, code signing is done at the app packaging level. On Windows, distributable installers are signed instead. If you already have code signing certificates for Windows and macOS, you can set your credentials in your Forge configuration. info For more information on code signing, check out the Signing macOS Apps guide in the Forge docs. * macOS * Windows forge.config.js module . exports = { packagerConfig : { osxSign : { } , // ... osxNotarize : { tool : 'notarytool' , appleId : process . env . APPLE_ID , appleIdPassword : process . env . APPLE_PASSWORD , teamId : process . env . APPLE_TEAM_ID } // ... } } forge.config.js module . exports = { // ... makers : [ { name : '@electron-forge/maker-squirrel' , config : { certificateFile : './cert.pfx' , certificatePassword : process . env . CERTIFICATE_PASSWORD } } ] // ... } Zusammenfassung ​ Electron applications need to be packaged to be distributed to users. In this tutorial, you imported your app into Electron Forge and configured it to package your app and generate installers. In order for your application to be trusted by the user's system, you need to digitally certify that the distributable is authentic and untampered by code signing it. Your app can be signed through Forge once you configure it to use your code signing certificate information. Diese Seite bearbeiten Vorherige Adding Features Nächste Publishing and Updating * Learning goals * Using Electron Forge * Importing your project into Forge * Creating a distributable * Important: signing your code * Zusammenfassung Dokumentation * Erste Schritte * API-Referenz Checklisten * Performance * Sicherheit Tools * Electron Forge * Elektro-Fiddle Community * Kontrolle * Ressourcen * Discord * Bluesky * X * Mastodon * Stack Overflow Mehr * GitHub * Open Collective * Infrastruktur Dashboard Copyright OpenJS Foundation und Electron Mitwirkenden. Alle Rechte vorbehalten. Die OpenJS Foundation hat eingetragene Marken und verwendet Marken. Für eine Liste der Marken der OpenJS Foundation , lesen Sie bitte unsere Markenrichtlinie und Markenliste . Marken und Logos nicht auf der Liste der Marken der OpenJS Foundation sind Marken™ oder eingetragene® Marken ihrer jeweiligen Inhaber. Der Gebrauch von ihnen impliziert keine Zugehörigkeit oder Zustimmung von ihnen. Die OpenJS Foundation | Nutzungsbedingungen | Datenschutzrichtlinie | Satzung | | | Markenrichtlinie | Markenliste | Cookie Policy Hosting and infrastructure graciously provided by