Application Packaging

To distribute your app with Electron, you need to package and rebrand it. To do this, you can either use specialized tooling or manual approaches.

With tooling

There are a couple tools out there that exist to package and distribute your Electron app. We recommend using Electron Forge. You can check out its documentation directly, or refer to the Packaging and Distribution part of the Electron tutorial.

Manual packaging

If you prefer the manual approach, there are 2 ways to distribute your application:

  • With prebuilt binaries
  • With an app source code archive

With prebuilt binaries

To distribute your app manually, you need to download Electron’s prebuilt binaries. Next, the folder containing your app should be named app and placed in Electron’s resources directory as shown in the following examples.

Application Packaging - 图1note

The location of Electron’s prebuilt binaries is indicated with electron/ in the examples below.

macOS

  1. electron/Electron.app/Contents/Resources/app/
  2. ├── package.json
  3. ├── main.js
  4. └── index.html

Windows and Linux

  1. electron/resources/app
  2. ├── package.json
  3. ├── main.js
  4. └── index.html

Then execute Electron.app on macOS, electron on Linux, or electron.exe on Windows, and Electron will start as your app. The electron directory will then be your distribution to deliver to users.

With an app source code archive (asar)

Instead of shipping your app by copying all of its source files, you can package your app into an asar archive to improve the performance of reading files on platforms like Windows, if you are not already using a bundler such as Parcel or Webpack.

To use an asar archive to replace the app folder, you need to rename the archive to app.asar, and put it under Electron’s resources directory like below, and Electron will then try to read the archive and start from it.

macOS

  1. electron/Electron.app/Contents/Resources/
  2. └── app.asar

Windows

  1. electron/resources/
  2. └── app.asar

You can find more details on how to use asar in the electron/asar repository.

Rebranding with downloaded binaries

After bundling your app into Electron, you will want to rebrand Electron before distributing it to users.

  • Windows: You can rename electron.exe to any name you like, and edit its icon and other information with tools like rcedit.

  • Linux: You can rename the electron executable to any name you like.

  • macOS: You can rename Electron.app to any name you want, and you also have to rename the CFBundleDisplayName, CFBundleIdentifier and CFBundleName fields in the following files:

    • Electron.app/Contents/Info.plist
    • Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

    You can also rename the helper app to avoid showing Electron Helper in the Activity Monitor, but make sure you have renamed the helper app’s executable file’s name.

    The structure of a renamed app would be like:

  1. MyApp.app/Contents
  2. ├── Info.plist
  3. ├── MacOS/
  4. │   └── MyApp
  5. └── Frameworks/
  6.     └── MyApp Helper.app
  7.         ├── Info.plist
  8.         └── MacOS/
  9.             └── MyApp Helper

Application Packaging - 图2note

it is also possible to rebrand Electron by changing the product name and building it from source. To do this you need to set the build argument corresponding to the product name (electron_product_name = "YourProductName") in the args.gn file and rebuild.

Keep in mind this is not recommended as setting up the environment to compile from source is not trivial and takes significant time.