Skip to content

Electron build & package

Packaging Electron for macOS

Notarization

JavaScript
scripts/notarize.js
const {notarize} = require('electron-notarize');
 
exports.default = async function notarizing(context) {
  const {electronPlatformName, appOutDir} = context;
  if (electronPlatformName !== 'darwin') {
    return;
  }
 
  const appName = context.packager.appInfo.productFilename;
  const appleId = 'apple-id';
 
  return await notarize({
    appBundleId: 'com.domain.app',
    appPath: `${appOutDir}/${appName}.app`,
    appleId,
    appleIdPassword: `password`,
  });
};

Config

electron-builder.yml
appId: com.domain.productname
directories:
  output: _release
  buildResources: assets
afterSign: scripts/notarize.js
productName: ProductName
files:
  - build/**/*
mac:
  gatekeeperAssess: false
  hardenedRuntime: true
  # Generate Icon
  icon: assets/icon.png
  # Add These
  entitlements: assets/entitlements.mac.plist
  entitlementsInherit: assets/entitlements.mac.inherit.plist
  target:
    - zip
    - dmg
dmg:
  sign: false
  # Generate a installer background
  background: assets/background.tiff
  icon: assets/icon.png
  iconSize: 110
  contents:
    - x: 140
      y: 245
    - x: 415
      y: 245
      type: link
      path: /Applications
  window:
    width: 540
    height: 405
publish:
  provider: github
  owner: owner
  repo: repo
compression: maximum

Auto updates channel

dev-app-updated.yml
provider: github
owner: <owner>
repo: <repo>

Scripts

NPM
package.json
"scripts": {
  "postinstall": "electron-builder install-app-deps",
  "react-start": "react-scripts start",
  "react-build": "react-scripts build",
  "prep-folders": "rimraf _release build",
  "lint": "eslint src/**/*.{ts,tsx}",
  "lint-fix": "eslint src/**/*.{ts,tsx} --fix",
  "release": "npm run prep-folders && npm run react-build && electron-builder --publish=always",
  "build": "npm run prep-folders && npm run react-build && electron-builder",
  "start": "concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\""
},

More @ dimitrisnl/electron-react-typescript-boilerplate