Electron - Packaging Apps

Electron - Packaging Applications

Packaging your Electron application into a distributable format is a crucial step before releasing it to users. Since Electron allows for cross-platform development, you’ll want tools that can help package for Windows, macOS, and Linux.

A popular tool for this is electron-packager. It bundles your Electron app source code with the Electron runtime and creates OS-specific packages (e.g., .app for macOS, .exe for Windows).

For more advanced packaging features, including auto-updates and various installer formats, electron-builder is another excellent and widely used option. For this tutorial, we’ll focus on electron-packager for its simplicity in getting started.

Supported Platforms by Electron Packager

Electron Packager can run on the following host platforms:

• Windows (win32, x64)
• macOS (darwin, arm64, x64 - formerly OS X)
• Linux (x64, armv7l, arm64)

It can generate executables/bundles for the following target platforms:

• Windows (win32, x64, arm64)
• macOS (darwin, arm64, x64) / Mac App Store (mas, arm64, x64)
• Linux (x64, armv7l, arm64)

Installation of Electron Packager

Install electron-packager as a development dependency in your project:

npm install electron-packager --save-dev

Using --save-dev ensures that electron-packager is listed in your package.json and is available to anyone who clones your project and runs npm install.

Packaging Your App

You can run electron-packager from the command line. The basic command structure is:

npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

Where:

• <sourcedir>: The path to your application’s source code (e.g., . for the current directory).
• <appname>: The name of your application.
• --platform: The target platform (e.g., win32, darwin, linux).
• --arch: The target architecture (e.g., x64, arm64).
• [optional flags...]: Additional options like --out to specify output directory, --icon for app icon, etc.

For example, to package an app in the current directory (.) named MyApp for 64-bit Windows:

npx electron-packager . MyApp --platform=win32 --arch=x64 --out=dist

This command will:

• Find or download the correct Electron version for your project.
• Bundle your app with Electron into an executable format.
• Place the packaged app in a folder like dist/MyApp-win32-x64.

You can specify --all instead of --platform and --arch to build for all valid combinations for your host OS, or omit them to build for your current host platform and architecture.

It’s common to add packaging commands to your package.json scripts for convenience:

// In package.json
"scripts": {
  "start": "electron .",
  "package-win": "electron-packager . MyApp --platform=win32 --arch=x64 --out=dist --overwrite",
  "package-mac": "electron-packager . MyApp --platform=darwin --arch=arm64 --out=dist --overwrite"
  // Add more scripts for other platforms/architectures as needed
}

Then you can run, for example, npm run package-win.

For detailed options and advanced usage, refer to the official electron-packager documentation on GitHub.