Without networking, use electron builder to quickly package all platform applications

Posted by pacome on Thu, 03 Mar 2022 15:33:23 +0100

preface

Electron is becoming increasingly popular because it is easy to use and has good support for various operating platforms.

Today, I'd like to share my experience on how to use a set of code to quickly package and generate installation packages for mainstream platforms.

Project installation

First, use what I introduced earlier Tips for improving efficiency , setting:

NPM source is Taobao image source;
The Electron source is the Electron source address in the China mirror website.

Then execute the following instructions in sequence:

mkdir my-electron
cd my-electron
npm init -y
npm install electron@14.2.6 -D
npm install @electron/remote --save
npm install electron-builder -D

Packaging configuration

Package. In my electron directory JSON, add packaging configuration:

{
  "name": "my-electron",
  "version": "0.1.0",
  "author": "Programming samadhi",
  "build": {  // Configuration of electron builder
    "productName":"myFirstApp",//Project name this is also the prefix name of the generated exe file
    "appId": "xxxxx", 
    "copyright":"xxxx",//Copyright information
    "directories": {
        "output": "build" // Output folder
    }, 
    "extraResources":  [{ // Configuration files that need to be read and written
        "from": "./config/config.json",
        "to": "../config/config.json"
    }],
    "win": {  
        "icon": "xxx/icon.ico"//Icon path,
        "target":[
            {
                "target": "nsis",
                "arch": ["x64"]
            }
        ]
    },
    "dmg": {
        "contents": [
            {
                "x": 0,
                "y": 0,
                "path": "/Application"
            }
        ]
    },
    "linux": {
        "icon": "xxx/icon.ico"
    },
    "mac": {
        "icon": "xxx/icon.ico"
    },
    "nsis": {
        "oneClick": false, // One click installation
        "guid": "xxxx", //Registry name, modification is not recommended
        "perMachine": true, // Whether to turn on permission restriction during installation (this computer or current user)
        "allowElevation": true, // Allow request for promotion. If false, the user must restart the installer with elevated privileges.
        "allowToChangeInstallationDirectory": true, // Allow to modify the installation directory
        "installerIcon": "./build/icons/aaa.ico", // Installation Icon
        "uninstallerIcon": "./build/icons/bbb.ico", //Uninstall Icon
        "installerHeaderIcon": "./build/icons/aaa.ico", // When installing the head Icon
        "createDesktopShortcut": true, // Create desktop icon
        "createStartMenuShortcut": true, // Create start menu icon
        "shortcutName": "xxxx" // Icon name
    }
  }
}

Configure packaging scripts

In package JSON, add the corresponding packaging script:

{
    ...
    "scripts": {
        "dev": "electron . --enable-loggin --no-sandbox",
        "build-64": "electron-builder --win --x64",
        "build-linux": "electron-builder --linux",
        "build-mac": "electron-builder --mac"
    }
    ...
}

Open the terminal in my electron directory and run npm run dev to enter the development mode.

About the Electron image of each platform

In the case of network, the speed is still very fast because we set up NPM image and Electron source.

But my side is intranet packaging, so I can't connect to the Internet. Therefore, I need to take a trick to download the Electron source of the corresponding platform and put it into their NPM cache before packaging.

When packaging, Electron builder will find the corresponding version of Electron source in their respective NPM cache directory according to different systems. When we put the downloaded source in the NPM cache, we don't need to go online to pull it.

I use electron@14.2.6 The download address of the image is: https://registry.npmmirror.com/binary.html?path=electron/14.2.6/ .

This is an example of getting the electron image cache in @ electron/get:

import { downloadArtifact } from '@electron/get';
const zipFilePath = await downloadArtifact({
  version: '14.2.6',
  platform: 'darwin',
  artifactName: 'electron',
  artifactSuffix: 'symbols',
  arch: 'x64',
});

The NPM cache paths corresponding to each operating system are:

Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

Note: the corresponding electron images of Linux x64 and Linux arm64 are different,

On the problem that the development mode cannot be started

The development mode may not start. The reason may be my electron and node_ The electron under modules is not installed, and the electron source is missing.

To solve this problem, simply execute the following instructions:

node ./node_modules/electron/cli.js

After the electron ic image is pulled, you can normally enter the start mode.

summary

The above is the record of packaging full platform desktop applications with electron builder without networking.

~End of this article, thank you for reading!

Learn interesting knowledge, make interesting friends and shape interesting souls!

Hello, I'm Programming samadhi Hermit Wang, my official account is " Programming samadhi "Welcome to pay attention and hope you can give us more advice!

Topics: Front-end Electron

Programmer Think