Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Electron app deployment


May 25, 2021 Electron


Table of contents


In order to deploy your application using Electron, the folder where you store the application needs to be called app and placed under electron's resource folder (Electron.app/Contents/Resources/ in Electron.app/Contents/Resources/ X, resources/ Linux and Windows) like this:

In OS X:

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

In Windows and Linux:

electron/resources/app
├── package.json
├── main.js
└── index.html

Then run Electron.app (or electron in Linux, electron.exe windows), and electron starts as your application. electron folder will be deployed and distributed to the final consumer.

Package your application into a file

In addition to distributing your application by copying all the resource files, you can avoid exposing your source code by packaging your application as an asar library file.

In order to use asar file instead app folder, you need to modify the name of the library file to app.asar and then place it under Electron's resource folder, from which Electron tries to read the library file and start it. Here's what it looks like:

In OS X:

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

In Windows and Linux:

electron/resources/
└── app.asar

See Application packaging for more details .

Change the name and download the binary

After you package your application with Electron, you may need to modify the name of the package before distributing it to users.

Windows

You can electron.exe name you like, and then you can edit its icons and other information using things like rcedit.

OS X

You can Electron.app to any name you like, and then you also need to modify the CFBundleDisplayName CFBundleIdentifier CFBundleName files. These documents are as follows:

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

You can also rename the help application to avoid displaying Electron Helper but make sure that you have modified the name of the executable file for the help app.

The construction of a name-changed application might be like this:

MyApp.app/Contents
├── Info.plist
├── MacOS/
│   └── MyApp
└── Frameworks/
    ├── MyApp Helper EH.app
    |   ├── Info.plist
    |   └── MacOS/
    |       └── MyApp Helper EH
    ├── MyApp Helper NP.app
    |   ├── Info.plist
    |   └── MacOS/
    |       └── MyApp Helper NP
    └── MyApp Helper.app
        ├── Info.plist
        └── MacOS/
            └── MyApp Helper

Linux

You can electron to whatever name you like.

Change the name by recompiling the source code

It is also possible to replace electron's name by modifying the product name and recompiling the source code. You need to atom.gyp file and recompile it thoroughly.

Grunt package script

Manually checking the Electron code and recompiling it is complex and obscure, so there is a Grunt task that automatically handles this content grunt-build-atom-shell .

This task automatically processes .gyp it from the source code, and then recompiles your application's local Node module to match the name of the new executable file.