Electron Packaging and Distribution

After Electron application development is complete, the application needs to be packaged into a desktop executable file and distributed to users.

The packaging and distribution process involves multiple stages, including tool selection, configuration, signing, and update strategy.

Introduction to Packaging Tools

electron-builder

  • Highly automated, supporting Windows, macOS, and Linux
  • Supports Automatic Update Functionality
  • Simple configuration, suitable for production environments
  • can generate.exe、.dmg、.AppImageand other formats

electron-packager

  • Official Recommended Packaging Tool, Lightweight
  • Only responsible for generating executable files, no built-in auto-update
  • Simple configuration, but requires combining other tools to handle installation packages and signing

electron-forge

  • Integrates packaging, templates, auto-update, and release workflows
  • Out-of-the-box, suitable for beginners to quickly start projects
  • Built-in Webpack / ESBuild build support

Tool Comparison and Selection

Tools Features Advantages Applicable scenarios
electron-builder High Automation, Cross-Platform, Supports Updates Simple configuration, suitable for production Complex Application Release
electron-packager Lightweight, Officially Supported Flexibly combine with other tools Simple Application Packaging
electron-forge Integrated development tools, quick startup Out-of-the-box, built-in build Beginners or rapid prototyping

Configure Packaging Parameters

package.json configuration

"build": {
  "appId": "com.example.myapp",
  "productName": "MyElectronApp",
  "directories": {
    "output": "dist"
  },
  "files": ["**/*"],
  "extraResources": ["assets/"],
  "mac": {
    "category": "public.app-category.utilities"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  },
  "linux": {
    "target": ["AppImage", "deb"],
    "icon": "build/icon.png"
  }
}

Platform-Specific Configuration

  • Windows: Installer package types (NSIS, Squirrel), icons.ico
  • macOS: Application category, signing,.icnsicon
  • Linux: Target formats (AppImage, deb, rpm), PNG icons

Icons and Resource Files

  • Icon size and format must meet platform requirements
  • Additional Resources Can Be Accessed ThroughextraResourcesorextraFilesadd

Multi-platform packaging

Windows packaging

electron-builder --win
  • can generate.exeor.msiInstallation file
  • Supports NSIS installation wizard and silent installation

macOS packaging

electron-builder --mac
  • can generate.dmgor.pkg
  • With Notarization, it can pass macOS Gatekeeper

Linux packaging

electron-builder --linux
  • Common formats: AppImage, deb, rpm
  • Suitable for desktop distribution across different distributions

Cross-compilation

  • Electron-builder supports cross-platform builds, but macOS applications must be signed on macOS
  • Windows/Linux can achieve cross-packaging through Linux or Windows build virtual machines

Code signing

Windows code signing

  • Signing with digital certificates (.pfx).exeor.msi
  • Example:
electron-builder --win --csc-link path/to/certificate.pfx --csc-key-password yourpassword
  • Enhance user trust and avoid SmartScreen blocking

macOS Notarization

  • Apple officially requires applications to be notarized to pass Gatekeeper
  • Requires an Apple Developer account
  • Build example:
electron-builder --mac --publish never
  • UsagenotarizeUpload the app via API for automatic notarization

Certificate Application and Management

  • Windows: Purchase an EV or standard code signing certificate
  • macOS: Apply for a developer certificate with an Apple Developer account
  • Certificates must be stored securely to avoid leaks

Automatic update

electron-updater usage

  • Works with electron-builder, supports differential updates
  • Installationelectron-updater：npm install electron-updater

Main Process Example:

const { autoUpdater } = require('electron-updater')

autoUpdater.on('update-available', () => console.log('发现新版本'))
autoUpdater.on('update-downloaded', () => autoUpdater.quitAndInstall())
autoUpdater.checkForUpdates()

Setting Up the Update Server

  • Can use GitHub Releases, private servers, or CDN
  • Provides a JSON file describing the latest version information

Differential update

  • Only downloads changed files, reducing bandwidth consumption
  • electron-updater has built-in support for NSIS / Squirrel / AppImage differential updates

Update Strategy

  • Automatically Check for Updates (on Startup or Scheduled)
  • Manually Trigger Updates
  • A pop-up prompts users to update immediately or defer the update

Summary

Core process of Electron packaging and distribution:

  • Choose tool：electron-builder、electron-packager、electron-forge
  • Configuration parameters: Define platform, icons, and resources in package.json
  • Multi-platform packaging：Windows、macOS、Linux
  • Code signing: Ensure the app is trustworthy and avoid security warnings
  • Automatic update: Enhance User Experience, Support Differential Updates

Following best practices allows Electron apps to be distributed to users quickly and securely, while also facilitating future iteration and updates.

other extensions