2015-09-01 02:10:29 +00:00
|
|
|
|
# Application Distribution
|
2014-05-04 10:32:12 +00:00
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
## Overview
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
You can use the following tools to distribute your application:
|
2019-04-02 20:45:35 +00:00
|
|
|
|
|
|
|
|
|
* [electron-forge](https://github.com/electron-userland/electron-forge)
|
|
|
|
|
* [electron-builder](https://github.com/electron-userland/electron-builder)
|
2019-07-20 01:52:11 +00:00
|
|
|
|
* [electron-packager](https://github.com/electron/electron-packager)
|
2019-04-02 20:45:35 +00:00
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
These tools will take care of all the steps you need to take to end up with a
|
|
|
|
|
distributable Electron application, such as bundling your application,
|
|
|
|
|
rebranding the executable, and setting the right icons.
|
|
|
|
|
|
|
|
|
|
You can check the example of how to package your app with `electron-forge` in
|
|
|
|
|
our [Quick Start Guide](quick-start.md#package-and-distribute-the-application).
|
2019-04-02 20:45:35 +00:00
|
|
|
|
|
|
|
|
|
## Manual distribution
|
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
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
To distribute your app manually, you need to download Electron's [prebuilt
|
2016-11-25 23:36:34 +00:00
|
|
|
|
binaries](https://github.com/electron/electron/releases). Next, the folder
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
> *NOTE:* the location of Electron's prebuilt binaries is indicated
|
|
|
|
|
with `electron/` in the examples below.
|
2014-05-04 10:32:12 +00:00
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
*On macOS:*
|
2014-05-04 10:32:12 +00:00
|
|
|
|
|
2019-07-30 20:11:56 +00:00
|
|
|
|
```plaintext
|
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
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
*On Windows and Linux:*
|
2014-05-04 10:32:12 +00:00
|
|
|
|
|
2019-07-30 20:11:56 +00:00
|
|
|
|
```plaintext
|
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
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
### With an app source code archive
|
2014-12-29 18:46:15 +00:00
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
Instead of from 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.
|
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
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
*On macOS:*
|
2014-12-29 18:46:15 +00:00
|
|
|
|
|
2019-07-30 20:11:56 +00:00
|
|
|
|
```plaintext
|
2015-04-16 03:31:12 +00:00
|
|
|
|
electron/Electron.app/Contents/Resources/
|
2014-12-29 18:46:15 +00:00
|
|
|
|
└── app.asar
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
*On Windows and Linux:*
|
2014-12-29 18:46:15 +00:00
|
|
|
|
|
2019-07-30 20:11:56 +00:00
|
|
|
|
```plaintext
|
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
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
#### macOS
|
2014-12-29 18:46:15 +00:00
|
|
|
|
|
2015-04-17 03:59:40 +00:00
|
|
|
|
You can rename `Electron.app` to any name you want, and you also have to rename
|
2016-09-01 14:49:36 +00:00
|
|
|
|
the `CFBundleDisplayName`, `CFBundleIdentifier` and `CFBundleName` fields in the
|
2015-04-17 03:59:40 +00:00
|
|
|
|
following files:
|
2014-12-29 18:46:15 +00:00
|
|
|
|
|
2015-04-16 03:31:12 +00:00
|
|
|
|
* `Electron.app/Contents/Info.plist`
|
2015-04-17 03:59:40 +00:00
|
|
|
|
* `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:
|
|
|
|
|
|
2019-07-30 20:11:56 +00:00
|
|
|
|
```plaintext
|
2015-04-17 03:59:40 +00:00
|
|
|
|
MyApp.app/Contents
|
|
|
|
|
├── Info.plist
|
|
|
|
|
├── MacOS/
|
|
|
|
|
│ └── MyApp
|
|
|
|
|
└── Frameworks/
|
|
|
|
|
└── MyApp Helper.app
|
|
|
|
|
├── Info.plist
|
|
|
|
|
└── MacOS/
|
|
|
|
|
└── MyApp Helper
|
|
|
|
|
```
|
2014-12-29 18:46:15 +00:00
|
|
|
|
|
2020-12-02 06:52:12 +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
|
2014-12-29 18:46:15 +00:00
|
|
|
|
|
2015-04-17 03:59:40 +00:00
|
|
|
|
You can rename the `electron` executable to any name you like.
|
2014-12-29 20:12:04 +00:00
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
### Rebranding by rebuilding Electron from source
|
2014-12-29 20:12:04 +00:00
|
|
|
|
|
2015-04-17 03:59:40 +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
|
|
|
|
|
2020-12-02 06:52:12 +00:00
|
|
|
|
[asar]: https://github.com/electron/asar
|