Developing electron client program, packaging is a problem. The following is my experience in the work and the current understanding of electron- Builder to share some insights.

The basic concept

Definition of official website

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with Auto Update support out of the box.

The basic part of electron and electric-Builder is skipped in this article, if you are interested, you can read this article

How to use

Builder is easy to use and configure. There are two ways to configure builder

package.jsonIs directly configured for use in the
The specifiedelectron-builder.ymlfile

The demo address will be given at the end of the article (the electron version used in the demo project is V2.0.7, currently 2.0.8).

Here is a simple annotated configuration in package.json

Basic configuration

"build": {  // Here is the configuration of the electron Builder
    "productName":"xxxx".// Project name This is also the prefix of the generated EXE file
    "appId": "com.xxx.xxxxx"./ / package name
    "copyright":"xxxx".// Copyright information
    "directories": { // Output folder
      "output": "build"
    }, 
    // Windows related configuration
    "win": {  
      "icon": "xxx/icon.ico"// Icon path}}Copy the code

After adding the above files to the configuration file, you can package up simple folders. Folders are definitely not what we want. Let’s move on to other configurations. 2. Package the target configuration to package as an installer we have two ways,

Use the NSIS tool to package our folder again as exe
Package the NSIS directly into exe through electron- Builder. The configuration is as follows

"win": {  // Change the build option
    "icon": "build/icons/aims.ico"."target": [{"target": "nsis" // We want the target installation package}},Copy the code

Other Platform Configurations

  "dmg": { // macOSdmg
    "contents": [...]. },"mac": {  // mac
      "icon": "build/icons/icon.icns"
    },
    "linux": { // linux
      "icon": "build/icons"
    }
Copy the code

Nsis configuration

The configuration of nSIS refers to the configuration of the installation process. In fact, it is very important. If nSIS is not configured, the application will be automatically installed on disk C. There is no room for users to choose, so it is certainly not possible

The nSIS configuration is done in the NSIS option in build. Here are some nSIS configurations

"nsis": {
  "oneClick": false.// Whether to install with one click
  "allowElevation": true.// Allow request promotion. If false, the user must restart setup with the promoted permissions.
  "allowToChangeInstallationDirectory": true.// Allows you to change the installation directory
  "installerIcon": "./build/icons/aaa.ico".// Install icon
  "uninstallerIcon": "./build/icons/bbb.ico".// Uninstall the icon
  "installerHeaderIcon": "./build/icons/aaa.ico".// Install header icon
  "createDesktopShortcut": true.// Create a desktop icon
  "createStartMenuShortcut": true.// Create start menu icon
  "shortcutName": "xxxx".// Icon name
  "include": "build/script/installer.nsh".// The included custom NSIS script is quite useful for building a strict installation process.
  "script" : "build/script/installer.nsh" // Path to the NSIS script for custom setup. The default is build/installer.nsi
},
Copy the code

Which one should I choose between include and script?

In the personalized installation process requirements are not complicated, just need to modify the installation location, uninstall prompts and other simple operations recommended to use include configuration, if you need cool installation process, it is recommended to use script to fully customize.

NSIS is very powerful for handling things like installation packages. But it’s no easier to learn than a high-level language. Among them the mystery wants each big guy to explore by himself

Here are some learning resources

NSIS primary article
NSIS package script basics
Sample script
NSIS BBS

Configuration of the operating system

This is mostly 64 – and 32-bit configurations in Windows

CLI parameter

Electron builder -- IA32 // 32 bit electron builder // 64 bit (default)Copy the code

Nsis configured in

"win": {
  "icon": "build/icons/aims.ico"."target": [{"target": "nsis"."arch": [ // This means to print a 32-bit + 64-bit package, but note that this package is a large size, so it is recommended to print a 32-bit package.
        "x64"."ia32"]]}}Copy the code

Update the configuration

The following configuration is for the update, mainly to generate the lastest. Yaml configuration file

"publish": [{"provider": "generic".// The server provider can also be GitHub, etc
    "url": "http://xxxxx/" // Server address}].Copy the code

Complete configuration

Basically the complete configuration available

"build": {
    "productName":"xxxx".// Project name This is also the prefix of the generated EXE file
    "appId": "com.leon.xxxxx"./ / package name
    "copyright":"xxxx".// Copyright information
    "directories": { // Output folder
      "output": "build"
    }, 
    "nsis": {
      "oneClick": false.// Whether to install with one click
      "allowElevation": true.// Allow request promotion. If false, the user must restart setup with the promoted permissions.
      "allowToChangeInstallationDirectory": true.// Allows you to change the installation directory
      "installerIcon": "./build/icons/aaa.ico".// Install icon
      "uninstallerIcon": "./build/icons/bbb.ico".// Uninstall the icon
      "installerHeaderIcon": "./build/icons/aaa.ico".// Install header icon
      "createDesktopShortcut": true.// Create a desktop icon
      "createStartMenuShortcut": true.// Create start menu icon
      "shortcutName": "xxxx".// Icon name
      "include": "build/script/installer.nsh".// Contains custom NSIS scripts
    },
    "publish": [{"provider": "generic".// The server provider can also be GitHub, etc
        "url": "http://xxxxx/" // Server address}]."files": [
      "dist/electron/**/*"]."dmg": {
      "contents": [{"x": 410."y": 150."type": "link"."path": "/Applications"
        },
        {
          "x": 130."y": 150."type": "file"}},"mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico"."target": [{"target": "nsis"."arch": [
            "ia32"]]}},"linux": {
      "icon": "build/icons"}}Copy the code

Command Line Parameters (CLI)

Commands (orders) :

[default] electronic-Builder install-app-deps Download app depends on the electronic-Builder node-gyp-rebuild command Rebuild your own native code electronic-Builder create-self-signed-cert to create a self-signed code signing certificate electronic-Builder start for Windows applications Run the application in development mode using electronic-WebPack (even if it's not supported by the Electronic-WebPack module)Copy the code

Building(Build parameters):

  --mac, -m, -o, --macos   Build for macOS,                              [array]
  --linux, -l              Build for Linux                               [array]
  --win, -w, --windows     Build for Windows                             [array]
  --x64                    Build forX64 [Boolean] -- Ia32 BuildforIa32 (32-bit package) [Boolean] -- ARMV7L Buildfor armv7l                              [boolean]
  --arm64                  Build forarm64 [boolean] --dir Build unpacked dir. Useful to test. [boolean] --prepackaged, --pd Path to the prepackaged application (packaged in a distributable format) --projectDir, --project Path to the project directory. The default is the current working directory. --config, -c Path to the configuration file. Default to 'electron- Builder. yml' (or 'js', or' js5 ')Copy the code

Publishing (release) :

-- Publish, -p Releases to GitHub Releases [choices:"onTag"."onTagOrDraft"."always"."never", undefined]
Copy the code

Deprecated (abandoned) :

-- Draft Please set releaseType [Boolean] --prerelease Please set releaseType [Boolean] --platform destination platform (Please change to options -- MAC, --win or -- Linux) [Choices:"mac"."win"."linux"."darwin"."win32"."all", undefined]
  --arch        目标arch (请更改为选项 --x64 or --ia32)
                   [choices: "ia32"."x64"."armv7l"."arm64"."all", undefined]
Copy the code

Other (Other) :

  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]
Copy the code

Examples (example) :

The electron builder-mWL is macOS, Xz build deb and tar.xz electric-builder-c.extrametadata. Foo =bar Set the package.js property 'foo' to 'bar' electronic-Builder --config.nsis. Unicode =falseConfigure unicode options for NSISCopy the code

TargetConfiguration(build TargetConfiguration):

target:  String- the name of the target, such as the snap. Arch "x64" | "ia32" | "armv7l" | "arm64" > | "x64" | "ia32" | "armv7l" | "arm64" list - the arch supportCopy the code

Common Mistakes

NPM download problem

Because NPM is slower in China. The electron-V.xxxx.zip download fails. If these things are packaged for the first time, you need to download the corresponding support files for the ELECTRON version. There are two solutions
1. Set the mirror: find it in User on drive C.npmrcFile. And then I’m going to add the following line, which is sometimes not very useful
```
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
Copy the code
```
1. Directly go to taobao image file library to find the corresponding file and download it, put it into the designated directory, Electron TaobaoMirror address. After downloading, place it in the specified file. For general documents, the address isC:\Users\Administrator\AppData\Local\electron\Cache. For example, I want to download version 1.8.4electron, then find the file under the image and put it in the specified folder.

(If it is executingnpm installDownload not down) directly inTaobao mirrorDownload the corresponding version of the ZIP and drop it into C:\Users\YourUserName. Electron

That solves the problem, simple and violent.

NSIS download problem

If you want to play NSIS package, you also need to download NSIS -resources- XXX etc package. After the above experience, we know what is missing and fill in what is missing. Through the error log, we can get the version we want to download. In general, the error usually shows the github download address, and directly click the link to download. But the location is different this time. Since this is the support environment for the electron Builder, we will put it under C:\Users\Administrator\AppData\Local\electron- Builder \cache\nsis\.

The train of thought that solves these problems normally is, lack what take what 😄.

conclusion

Electron – Builder is a simple and powerful library. I’m a sucker for it anyway

The Demo address

Original address if feel useful words to ⭐ bar

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Electron – Builder packs insights

The basic concept

How to use

Complete configuration

Command Line Parameters (CLI)

Common Mistakes

conclusion

Electron – Builder packs insights

The basic concept

How to use

Complete configuration

Command Line Parameters (CLI)

Common Mistakes

conclusion

Related Posts

Front-end Docker image volume optimization (Node + Nginx/Node + Multi-stage Build)

JS Basic series – browser cache

Simple and practical state management tool (part 1: Responsive Service)