2022-06-22 08:17:48 +00:00
---
title: 'Application Packaging'
description: '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.'
slug: application-distribution
hide_title: false
---
2014-05-04 10:32:12 +00:00
2022-06-22 08:17:48 +00:00
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.
2020-12-02 06:52:12 +00:00
## With tooling
2022-06-22 08:17:48 +00:00
There are a couple tools out there that exist to package and distribute your Electron app.
2022-09-21 20:49:22 +00:00
We recommend using [Electron Forge ](./forge-overview.md ). You can check out
its [documentation ](https://www.electronforge.io ) directly, or refer to the [Packaging and Distribution ](./tutorial-5-packaging.md )
2022-06-22 08:17:48 +00:00
part of the Electron tutorial.
2019-04-02 20:45:35 +00:00
2022-06-22 08:17:48 +00:00
## Manual packaging
2020-12-02 06:52:12 +00:00
2022-06-22 08:17:48 +00:00
If you prefer the manual approach, there are 2 ways to distribute your application:
2019-04-02 20:45:35 +00:00
2022-06-22 08:17:48 +00:00
- With prebuilt binaries
- With an app source code archive
2020-11-05 22:12:43 +00:00
2020-12-02 06:52:12 +00:00
### With prebuilt binaries
2019-04-02 20:45:35 +00:00
2024-05-29 09:41:15 +00:00
To distribute your app manually, you need to download Electron's
[prebuilt binaries ](https://github.com/electron/electron/releases ). Next, the folder
2016-11-25 23:36:34 +00:00
containing your app should be named `app` and placed in Electron's resources
2020-12-02 06:52:12 +00:00
directory as shown in the following examples.
2022-06-22 08:17:48 +00:00
:::note
The location of Electron's prebuilt binaries is indicated
2020-12-02 06:52:12 +00:00
with `electron/` in the examples below.
2022-06-22 08:17:48 +00:00
:::
2014-05-04 10:32:12 +00:00
2022-06-22 08:17:48 +00:00
```plain title='macOS'
2015-04-16 03:31:12 +00:00
electron/Electron.app/Contents/Resources/app/
2014-05-04 10:32:12 +00:00
├── package.json
├── main.js
└── index.html
```
2022-06-22 08:17:48 +00:00
```plain title='Windows and Linux'
2015-04-16 03:31:12 +00:00
electron/resources/app
2014-05-04 10:32:12 +00:00
├── package.json
├── main.js
└── index.html
```
2020-12-02 06:52:12 +00:00
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.
2014-05-04 10:32:12 +00:00
2022-06-22 08:17:48 +00:00
### With an app source code archive (asar)
2014-12-29 18:46:15 +00:00
2021-11-17 18:20:24 +00:00
Instead of shipping your app by copying all of its source files, you can
2023-01-16 09:22:49 +00:00
package your app into an [asar][] archive to improve the performance of reading
2020-12-02 06:52:12 +00:00
files on platforms like Windows, if you are not already using a bundler such
as Parcel or Webpack.
2014-12-29 18:46:15 +00:00
To use an `asar` archive to replace the `app` folder, you need to rename the
2015-04-16 03:31:12 +00:00
archive to `app.asar` , and put it under Electron's resources directory like
2015-10-14 10:28:27 +00:00
below, and Electron will then try to read the archive and start from it.
2014-12-29 18:46:15 +00:00
2022-06-22 08:17:48 +00:00
```plain title='macOS'
2015-04-16 03:31:12 +00:00
electron/Electron.app/Contents/Resources/
2014-12-29 18:46:15 +00:00
└── app.asar
```
2022-06-22 08:17:48 +00:00
```plain title='Windows'
2015-04-16 03:31:12 +00:00
electron/resources/
2014-12-29 18:46:15 +00:00
└── app.asar
```
2014-12-08 05:38:29 +00:00
2020-12-02 06:52:12 +00:00
You can find more details on how to use `asar` in the
[`electron/asar` repository][asar].
2014-12-29 18:46:15 +00:00
2020-12-02 06:52:12 +00:00
### Rebranding with downloaded binaries
2014-12-29 18:46:15 +00:00
2015-04-16 03:31:12 +00:00
After bundling your app into Electron, you will want to rebrand Electron
2014-12-29 20:12:04 +00:00
before distributing it to users.
2014-09-29 13:34:54 +00:00
2022-06-22 08:17:48 +00:00
- **Windows:** You can rename `electron.exe` to any name you like, and edit
its icon and other information with tools like [rcedit ](https://github.com/electron/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:
2014-12-29 18:46:15 +00:00
2022-06-22 08:17:48 +00:00
- `Electron.app/Contents/Info.plist`
- `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist`
2015-04-17 03:59:40 +00:00
2022-06-22 08:17:48 +00:00
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.
2015-04-17 03:59:40 +00:00
2022-06-22 08:17:48 +00:00
The structure of a renamed app would be like:
2015-04-17 03:59:40 +00:00
2022-06-22 08:17:48 +00:00
```plain
2015-04-17 03:59:40 +00:00
MyApp.app/Contents
├── Info.plist
├── MacOS/
2022-06-22 08:17:48 +00:00
│ └── MyApp
2015-04-17 03:59:40 +00:00
└── Frameworks/
└── MyApp Helper.app
├── Info.plist
└── MacOS/
2022-06-22 08:17:48 +00:00
└── MyApp Helper
2015-04-17 03:59:40 +00:00
```
2014-12-29 18:46:15 +00:00
2022-06-22 08:17:48 +00:00
:::note
2020-12-02 06:52:12 +00:00
2022-06-22 08:17:48 +00:00
it is also possible to rebrand Electron by changing the product name and
2018-09-09 01:15:32 +00:00
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.
2014-12-29 20:12:04 +00:00
2022-06-22 08:17:48 +00:00
Keep in mind this is not recommended as setting up the environment to compile
from source is not trivial and takes significant time.
:::
2020-12-02 06:52:12 +00:00
[asar]: https://github.com/electron/asar