docs: expand tutorial (#34604)

* docs: base tutorial update

* more docs

* zzz

* remove unused images
This commit is contained in:
Erick Zhao 2022-06-22 04:17:48 -04:00 committed by GitHub
parent a5869fe997
commit e410109a3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 2009 additions and 202 deletions

View file

@ -1,26 +1,26 @@
# Application Distribution
---
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
---
## 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.
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:
There are a couple tools out there that exist to package and distribute your Electron app.
We recommend using [Electron Forge](https://www.electronforge.io). You can check out
its documentation directly, or refer to the [Packaging and Distribution](./tutorial-5-packaging.md)
part of the Electron tutorial.
* [electron-forge](https://github.com/electron-userland/electron-forge)
* [electron-builder](https://github.com/electron-userland/electron-builder)
* [electron-packager](https://github.com/electron/electron-packager)
## Manual packaging
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.
If you prefer the manual approach, there are 2 ways to distribute your application:
You can check the example of how to package your app with `electron-forge` in
the [Quick Start guide](quick-start.md#package-and-distribute-your-application).
## Manual distribution
- With prebuilt binaries
- With an app source code archive
### With prebuilt binaries
@ -29,21 +29,19 @@ binaries](https://github.com/electron/electron/releases). Next, the folder
containing your app should be named `app` and placed in Electron's resources
directory as shown in the following examples.
> *NOTE:* the location of Electron's prebuilt binaries is indicated
:::note
The location of Electron's prebuilt binaries is indicated
with `electron/` in the examples below.
:::
*On macOS:*
```plaintext
```plain title='macOS'
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
```
*On Windows and Linux:*
```plaintext
```plain title='Windows and Linux'
electron/resources/app
├── package.json
├── main.js
@ -54,7 +52,7 @@ 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
### 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
@ -65,16 +63,12 @@ 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.
*On macOS:*
```plaintext
```plain title='macOS'
electron/Electron.app/Contents/Resources/
└── app.asar
```
*On Windows and Linux:*
```plaintext
```plain title='Windows'
electron/resources/
└── app.asar
```
@ -87,47 +81,44 @@ You can find more details on how to use `asar` in the
After bundling your app into Electron, you will want to rebrand Electron
before distributing it to users.
#### macOS
- **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:
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`
* `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.
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:
The structure of a renamed app would be like:
```plaintext
```plain
MyApp.app/Contents
├── Info.plist
├── MacOS/
   └── MyApp
└── MyApp
└── Frameworks/
└── MyApp Helper.app
├── Info.plist
└── MacOS/
   └── MyApp Helper
└── MyApp Helper
```
#### Windows
:::note
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.
### Rebranding by rebuilding Electron from source
It is also possible to rebrand Electron by changing the product name and
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.
:::
[asar]: https://github.com/electron/asar