Best Practices for Electron Application Packaging and Distribution

Packaging and distributing Electron applications to users is an important part of the development process. This article covers best practices for packaging, signing, and publishing Electron applications.

Packaging Tool Selection

1. electron-builder (Recommended)

electron-builder is currently the most popular Electron packaging tool, supporting multi-platform packaging and automatic updates.

Installation

bash
npm install --save-dev electron-builder

Configuration Example

json
// package.json
{
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64", "ia32"]
        }
      ],
      "icon": "build/icon.ico"
    },
    "mac": {
      "target": [
        {
          "target": "dmg",
          "arch": ["x64", "arm64"]
        }
      ],
      "icon": "build/icon.icns",
      "category": "public.app-category.productivity"
    },
    "linux": {
      "target": [
        {
          "target": "AppImage",
          "arch": ["x64"]
        },
        {
          "target": "deb",
          "arch": ["x64"]
        }
      ],
      "icon": "build/icon.png",
      "category": "Utility"
    }
  },
  "scripts": {
    "build": "electron-builder",
    "build:win": "electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux"
  }
}

2. electron-packager

electron-packager is another packaging tool with relatively simple functionality.

bash
npm install --save-dev electron-packager

javascript
// package.json
{
  "scripts": {
    "package": "electron-packager . MyApp --platform=all --arch=x64 --out=dist/"
  }
}

Windows Platform Packaging

NSIS Installer Configuration

json
{
  "build": {
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64"]
        }
      ],
      "artifactName": "${productName}-${version}-${arch}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "MyApp",
      "installerIcon": "build/icon.ico",
      "uninstallerIcon": "build/icon.ico",
      "installerHeader": "build/header.bmp",
      "installerSidebar": "build/sidebar.bmp",
      "deleteAppDataOnUninstall": false
    }
  }
}

Code Signing

Windows application signing requires purchasing a code signing certificate.

json
{
  "build": {
    "win": {
      "certificateFile": "path/to/certificate.pfx",
      "certificatePassword": "your-password"
    }
  }
}

macOS Platform Packaging

DMG Configuration

json
{
  "build": {
    "mac": {
      "target": "dmg",
      "icon": "build/icon.icns",
      "category": "public.app-category.productivity",
      "hardenedRuntime": true,
      "gatekeeperAssess": false,
      "entitlements": "build/entitlements.mac.plist",
      "entitlementsInherit": "build/entitlements.mac.plist"
    },
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ],
      "window": {
        "width": 540,
        "height": 380
      }
    }
  }
}

Code Signing and Notarization

macOS applications need to be signed and notarized to run properly on newer versions.

bash
# Sign
codesign --deep --force --verify --verbose --sign "Developer ID Application: Your Name" dist/MyApp.app

# Notarize
xcrun notarytool submit dist/MyApp.dmg --apple-id "your@email.com" --password "app-specific-password" --team-id "TEAMID" --wait

json
{
  "build": {
    "mac": {
      "identity": "Developer ID Application: Your Name",
      "hardenedRuntime": true,
      "entitlements": "build/entitlements.mac.plist",
      "entitlementsInherit": "build/entitlements.mac.plist"
    }
  }
}

Linux Platform Packaging

AppImage Configuration

json
{
  "build": {
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png",
      "category": "Utility",
      "maintainer": "Your Name",
      "vendor": "Your Company",
      "synopsis": "My Application"
    }
  }
}

DEB Package Configuration

json
{
  "build": {
    "linux": {
      "target": "deb",
      "icon": "build/icon.png",
      "category": "Utility",
      "depends": ["gconf2", "gconf-service", "libnotify4", "libappindicator1", "libxtst6", "libnss3"]
    }
  }
}

Automatic Updates

electron-updater Configuration

bash
npm install electron-updater

javascript
// main.js
const { autoUpdater } = require('electron-updater')

app.whenReady().then(() => {
  autoUpdater.checkForUpdatesAndNotify()
})

autoUpdater.on('update-available', (info) => {
  console.log('Update available:', info)
})

autoUpdater.on('update-downloaded', (info) => {
  autoUpdater.quitAndInstall()
})

json
// package.json
{
  "build": {
    "publish": {
      "provider": "github",
      "owner": "your-username",
      "repo": "your-repo"
    }
  }
}

Optimizing Application Size

1. Exclude Unnecessary Files

json
{
  "build": {
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "asarUnpack": [
      "node_modules/some-module/**/*"
    ]
  }
}

2. Use Production Dependencies

bash
npm install --production

3. Compress Resources

json
{
  "build": {
    "compression": "maximum",
    "fileAssociations": [
      {
        "ext": "myfile",
        "name": "My File",
        "role": "Editor"
      }
    ]
  }
}

CI/CD Integration

GitHub Actions Example

yaml
name: Build and Release

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [macos-latest, windows-latest, ubuntu-latest]
    
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
          files: dist/*
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Security Best Practices

1. Disable DevTools (Production)

javascript
// main.js
if (process.env.NODE_ENV === 'production') {
  mainWindow.webContents.closeDevTools()
}

2. Use CSP (Content Security Policy)

html
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

3. Verify Update Packages

javascript
autoUpdater.setFeedURL({
  url: 'https://your-server.com/updates',
  headers: {
    'Authorization': 'Bearer your-token'
  }
})

Common Questions

Q: How to reduce application size?A: Exclude unnecessary files, use production dependencies, enable compression, consider using electron-forge or electron-builder optimization options.

Q: What to do if macOS notarization fails?A: Ensure using a valid developer certificate, check entitlements configuration, use the correct app-specific-password.

Q: How to implement incremental updates?A: electron-updater supports incremental updates by default, just configure the correct publishing server and version numbers.

Q: Where to buy Windows signing certificates?A: You can purchase from trusted certificate authorities like DigiCert, Sectigo, GlobalSign, etc.