1, Electronic builder

1. Installation and configuration of electronic builder

Installation command: yarn add electric builder -- dev or NPM install electric builder -- dev
(PS: it is officially recommended to use yarn installation, which is better to deal with the relationship between dependencies.)

After installation, configure package.json File:

"build": {
    "appId": "com.xx.xx", // appid，‘ com.xxx.xxx ’Format
    "productName": "appname", // Name of application
    "directories": {
      "output": "dist" // Which folder does the package exist in? In this case, the packaged exe will be generated in dist
    },
    "publish": [ // Use with electronic Updater
      {
        "provider": "generic", // Server vendor
        "url": "http://oss.poooli.com/download/app/desktop/" //server address
      }
    ],
    "files": [
      "src/resources" // Here you can customize the package file
    ],
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "src/resources/icons/icon.ico",
      "uninstallerIcon": "src/resources/icons/icon.ico",
      "installerHeaderIcon": "src/resources/icons/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "name"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "src/resources/icons/icon.icns"
    },
    "win": {
      "icon": "src/resources/icons/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "src/resources/icons/icon.ico"
    }
  },

After you configure build, you can customize the packing command in "script":

"scripts": {
	"compile": "electron-webpack",
    "dist": "npm run compile && electron-builder",
    "dist:dir": "npm run dist --dir -c.compression=store -c.mac.identity=null"
 },

Run yarn dist or npm run dist to package files. The above configuration allows us to find our packaged exe files in the dist folder of the project, and click to install them

2. Problems and solutions in packaging of electronic builder

electron Packaging failed:  part download request failed with status code 403

After everything is configured, there is still a problem running yarn dist. Because the connection is to a foreign website, and the first time you pack it, you have to constantly get resources from github, resulting in the connection timeout. Here is the solution:

1. Set Taobao image
Find. npmrc in C:\Users\Administrator and add the following two lines of code:

registry=https://registry.npm.taobao.org/
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/

No more dist
2. Download address: https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
After downloading, put it into the specified file: C: \ users \ administrator \ appdata \ local \ electronic \ cache.

2, Electronic Updater

Install command: yarn add electron updater -- save
Note: after installation, the updater must be in "dependencies", otherwise it will not work

The main process updates the application code as follows main.js Files or files in the main folder index.js Under file)

const isDevelopment = process.env.NODE_ENV !== 'production';

app.on('ready', () => {
  mainWindow = createMainWindow();
  if (!isDevelopment) updateHandle()
})

function updateHandle() {
  let message = {
    error: 'Error checking for updates',
    checking: 'Checking for updates',
    updateAva: 'New version detected, downloading',
    updateNotAva: 'It's the latest version, no need to update',
  };
  const feedUrl = 'http://oss.poooli.com/download/app/desktop/' + process.platform;
  // Set the uploaded server address
  autoUpdater.setFeedURL(feedUrl);
  autoUpdater.on('error', function (error) {
    sendUpdateMessage(message.error, error)
  });
  // Issued when checking whether the update starts.
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking, '')
  });
  /**
   * info UpdateInfo(For generic and github providers) | VersionInfo (for Bintray providers)
   * Issued when an update is available. If autoDownload is, the update true is automatically downloaded.
   */
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva, info)
  });
  // Triggered when no updates are available
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva, info)
  });

  // Update download progress event
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  // Start downloading
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
	
	 /**
	  * Communicate with the rendering process, call if "isUpdateNow" is received autoUpdater.quitAndInstall();
	  * Exit application and install
	  */
    ipcMain.on('isUpdateNow', (e, arg) => {
      console.log(arguments);
      console.log("Start update");
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

    mainWindow.webContents.send('isUpdateNow')
  });

  ipcMain.on("checkForUpdate", () => {
    //Perform automatic update check
    autoUpdater.checkForUpdates();
  })
}

// Send the event to the renderer process through the main process to prompt for update information
function sendUpdateMessage(text, info) {
  mainWindow.webContents.send('message', text, info)
}

The rendering process code is as follows:

export default {
  name: "index",
  data() {
    return {};
  },
  mounted() {
    this.listenUpdate();
  },
  destroyed() {
    if (process.env.NODE_ENV === "production") {
      ipcRenderer.removeAll(["message", "downloadProgress", "isUpdateNow"]);
    }
  },
  methods: {
    listenUpdate() {
      ipcRenderer.send("checkForUpdate");
      ipcRenderer.on("message", (event, text, info) => {
        console.log("arguments====", arguments);
        console.log("event,text====", event, text, info);
      });
      ipcRenderer.on("downloadProgress", (event, progressObj) => {
        console.log("progressObj===", progressObj);
        this.downloadPercent = progressObj.percent || 0;
      });
      ipcRenderer.on("isUpdateNow", () => {
        // Prompt the user to update the program after downloading
        let myNotification = new Notification("Update package download complete", {
          body: "Download the update package, click the notice to restart the application and apply the update to the latest version!"
        });

        myNotification.onclick = () => {
          console.log("Notification clicked");
          ipcRenderer.send("isUpdateNow");
        };
      });
    }
  }
}

After that, generate the latest.yml File and exe file. It will be linked to the local installation address latest.yml For comparison, if the version of YML in the server address is higher than the local version, a version update will be performed. Want to change version number, change package.json The "version" in the file can be packaged again.

Well, this is the package + update summary of electron. The process is really difficult and dangerous. There are many problems, but the good thing is that they have been solved

Document address of electronic updater: https://www.electron.build/auto-update