0Pricing
React Academy · Lesson

Packaging and Distribution for Desktop Platforms

Build installers for macOS, Windows, and Linux using electron-builder with code signing and auto-update.

Packaging and Distribution for Desktop Platforms is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

electron-builder Configuration

electron-builder is the standard tool for packaging Electron apps into distributable installers. Its configuration lives in package.json under the "build" key, specifying app metadata (appId, productName), icon paths, and per-platform target formats.

Build Targets by Platform

electron-builder supports macOS (dmg and zip), Windows (nsis installer), and Linux (AppImage and deb). You can target multiple platforms in a single build command or configure CI to build each platform on its native runner for best compatibility.

Code Signing for macOS

macOS requires code signing with an Apple Developer certificate for Gatekeeper to allow users to open the app without a security warning. electron-builder reads your certificate from the macOS Keychain during the build process and signs all binaries automatically.

Notarization for macOS

Beyond code signing, modern macOS also requires notarization — submitting the app to Apple's notarization service, which scans for malware and issues a ticket. electron-builder can automate notarization via electron-notarize, and users on macOS 10.15+ will be blocked without it.

Code Signing for Windows

Windows requires an Authenticode certificate from a trusted Certificate Authority (CA) for SmartScreen to trust your installer. Without signing, users see a "Windows protected your PC" warning. Extended Validation (EV) certificates eliminate the warning immediately, while standard OV certificates build trust over time.

Build Output Structure

After a successful build, electron-builder writes platform-specific installers to the dist/ directory. You'll find the DMG or zip for macOS, the NSIS .exe for Windows, and the AppImage or .deb for Linux, along with a latest.yml (or latest-mac.yml) auto-update manifest.

App Icons

Electron apps need icons in platform-specific formats: a 512x512 PNG for Linux, an ICNS file (multi-resolution) for macOS, and an ICO file (multi-resolution) for Windows. electron-builder can generate all formats from a single 1024x1024 PNG using the --icon flag.

Auto-Update with electron-updater

The electron-updater package integrates with electron-builder to provide automatic updates. Publish your builds to GitHub Releases or S3, and electron-updater can check for updates on startup, download the delta update in the background, and prompt the user to restart.

Checking for Updates on Startup

Call autoUpdater.checkForUpdatesAndNotify() in main.js after the app is ready. electron-updater fetches the latest.yml manifest from your publish target, compares versions, and if an update is available, downloads it and shows a native notification when ready to install.

The ASAR Archive

electron-builder bundles your application's JavaScript files into a single ASAR archive (similar to a tar file) for distribution. This improves startup performance by reducing file system lookups and makes it harder (but not impossible) to inspect your source code directly.

Unpacking Native Modules from ASAR

Native Node.js modules (.node files) cannot be loaded from inside an ASAR archive — they must be unpacked to the file system. Configure asarUnpack in electron-builder to list native module patterns, which places them in the app.asar.unpacked directory alongside the archive.

macOS Notarization Requirement

Why is notarization required for macOS distribution beyond just code signing?

Lesson Recap

Distributing an Electron app involves configuring electron-builder targets, signing the code for both macOS (with notarization) and Windows (Authenticode), and optionally setting up auto-updates with electron-updater. The ASAR archive bundles your app for distribution, with native modules unpacked separately. A solid CI/CD pipeline handles these steps automatically per platform.

Frequently asked questions

Is the “Packaging and Distribution for Desktop Platforms” lesson free?

Yes — the full text of “Packaging and Distribution for Desktop Platforms” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Packaging and Distribution for Desktop Platforms”?

Build installers for macOS, Windows, and Linux using electron-builder with code signing and auto-update. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Packaging and Distribution for Desktop Platforms” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Electron Architecture: Main and Renderer Processes
  2. Setting Up React with Electron
  3. IPC Communication Between Processes
  4. Packaging and Distribution for Desktop Platforms
← Back to React Academy