Getting Started with Electron: Building Desktop Apps for Web Developers

Automating the Packaging and Release Process

Section 7

Chapter 6: Packaging and Distributing Your Electron Application

Getting Started with Electron: Building Desktop Apps for Web DevelopersChapter 6: Packaging and Distributing Your Electron Application

As your Electron application matures, manually packaging and releasing it becomes a tedious and error-prone process. Fortunately, the Electron ecosystem offers powerful tools to automate these tasks, allowing you to focus on building great features rather than repetitive build steps. This section will guide you through the common methods and best practices for automating your packaging and release workflow.

The cornerstone of automating Electron builds is the electron-builder package. It's a comprehensive tool that handles building installers, executables, and portable versions of your application for various operating systems (Windows, macOS, Linux) with minimal configuration. It supports a wide range of packaging formats, including NSIS, Squirrel.Windows, DMG, and AppImage.

npm install electron-builder --save-dev
# or
yarn add electron-builder --dev

Once electron-builder is installed, you'll typically configure it in your package.json file. This configuration tells electron-builder how to build your application, including settings for the target platforms, icons, and application metadata.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My awesome Electron app",
  "main": "main.js",
  "scripts": {
    "build:win": "electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux"
  },
  "devDependencies": {
    "electron-builder": "^24.0.0"
  },
  "build": {
    "appId": "com.example.myelectronapp",
    "productName": "My Electron App",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "build/icon.icns"
    },
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png"
    }
  }
}

In the package.json above, we've added a build section for electron-builder configuration and defined npm scripts to trigger builds for specific platforms. The appId is crucial for unique identification on different operating systems and for code signing. The productName is what users will see. The directories.output specifies where the build artifacts will be placed.

To execute these builds, you would simply run the corresponding npm script:

npm run build:win
npm run build:mac
npm run build:linux
チャプターへ戻る