This article can be considered an extension and further application of "The Road to Beautifying the UI of Installation Packages - Visual Configuration Guide for nsNiuniuSkin Installation Package Creation." On the basis of visual configuration, a script is generated for electron-builder packaging!

Friends have been giving feedback that they don't know how to integrate nsNiuniuSkin with Electron packaging. I have consolidated and summarized the concerns, which mainly revolve around the following points:

• How to integrate the packaging processes of electron-builder and nsNiuniuSkin into a unified process?
• How to integrate the nsNiuniuSkin packaged installer with the upgrade process of electron-updater?
• How to make the installer packaged by nsNiuniuSkin compatible with the one previously packaged by electron-builder?

Principle

Today, let's thoroughly discuss these questions. First, let's address the first two questions by implementing a complete integration with electron-builder in three simple steps.

When developing software using Electron, electron-builder is commonly used for file packaging and distribution during release. The corresponding CI/CD processes are also based on this foundation. Based on this, we can generate a packaging script from the configuration of nsNiuniuSkin and embed it into the scripts of electron-builder. This way, the original packaging process remains unaffected, and it only takes three simple steps to configure.

Package with complete functionality and attractive user interface generated in three steps

1. On the visual configuration interface, configure basic packaging parameters and Electron-related settings

There are a few points to note:

• For details on basic configuration, please refer to "The Road to Beautifying the UI of Installation Packages - Visual Configuration Guide for nsNiuniuSkin Installation Package Creation."
• Explanation of several special parameters

Special Note:

For a software installation package, other information is relatively fixed, and only the version number will be adjusted as the code increases. Therefore, we set the software name, installation package name prefix, etc., as fixed settings. Further, we specify the product version number and installation package suffix as environment variables of electron-builder. During packaging, electron-builder automatically reads the values of these variables from the environment variables formed by package.json configuration to obtain the final version number and installation package name.

After configuring the settings, click "Save Configuration" (at this point, an error will occur if you try to generate the installation package on the interface because it is used to generate for integration with electron-builder and relies on environment variables).

2. Copy the generated command line parameters to the scripts configuration in package.json

After configuring the previous step, a file named generate_leeqia_mountain_7z_cmdline.txt will be generated in the directory where gui_package.bat is located. Open this file, and its content is as follows:

python ../package.py --project_name=\"leeqia_mountain\" --package_mode=1 --need_sign=False --build_for_electron=False --generate_latest_file=True --files_toinstall_name=\"FilesToInstall\" --uninst_file_name=\"uninst.exe\" --src_files_dir=\"./NiuNiuCaptureElectronDemo/dist/win-unpacked\" --PRODUCT_NAME=\"利洽科技截图控件\" --PRODUCT_NAME_EN=\"Leeqia ScreenCapture\" --INSTALL_OUTPUT_NAME=\"TestCapture_Setup_v%npm_package_version%.exe\" --PRODUCT_VERSION=\"%npm_package_version%\" --EXE_NAME=\"TestCapture.exe\" --INSTALL_LOCATION_KEY=\"InstallLocation\" --INSTALL_APPEND_PATH=\"Leeqia_Capture\" --PRODUCT_PATHNAME=\"Leeqia_Capture\" --INSTALL_DEFALT_SETUPPATH=\"$PROGRAMFILES32\\${INSTALL_APPEND_PATH}\" --INSTALL_DEFAULT_SHOTCUT=1 --INSTALL_DEFAULT_AUTORUN=0 --INSTALL_EXECUTION_LEVEL=\"admin\" --INSTALL_MODE_ALL_USERS=\"all\" --INSTALL_DOWNLOAD_BASEURL=\"http://www.ggniu.cn/test_online_install/\" --PRODUCT_LEGAL=\"Leeqia Copyright（c）2020\" --PRODUCT_PUBLISHER=\"Leeqia\" --TEST_SLEEP=0

Copy the content and paste it into the specified location in the scripts section of the package.json file, as follows:

{
  "name": "TestCapture",
  "version": "1.0.0",
  "main": "main.js",
  "description": "",
  "author": "support@leeqia.com",
  "build": {
    "appId": "appid",
    "nsis": {
      "guid": "Test_Capture"  
    },
    "extraFiles": [
      "capture"
    ],
    "win": {
      "icon": "app.ico"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080/update/"
      }
    ]
  },
  "devDependencies": {
    "electron": "8.5.5",
    "electron-builder": "23.6.0"
  },
  "dependencies": {
    "electron-log": "^5.0.0-beta.16",
    "electron-updater": "^5.3.0"
  },
  "scripts": {
    "pack": "npm run clear-dist & npm run build ",
    "clear-dist": "rmdir dist /s /q",
    "build": "electron-builder --win && python ../package.py --project_name=\"leeqia_mountain\" --package_mode=1 --need_sign=False --build_for_electron=False --generate_latest_file=True --files_toinstall_name=\"FilesToInstall\" --uninst_file_name=\"uninst.exe\" --src_files_dir=\"./NiuNiuCaptureElectronDemo/dist/win-unpacked\" --PRODUCT_NAME=\"利洽科技截图控件\" --PRODUCT_NAME_EN=\"Leeqia ScreenCapture\" --INSTALL_OUTPUT_NAME=\"TestCapture_Setup_v%npm_package_version%.exe\" --PRODUCT_VERSION=\"%npm_package_version%\" --EXE_NAME=\"TestCapture.exe\" --INSTALL_LOCATION_KEY=\"InstallLocation\" --INSTALL_APPEND_PATH=\"Leeqia_Capture\" --PRODUCT_PATHNAME=\"Leeqia_Capture\" --INSTALL_DEFALT_SETUPPATH=\"$PROGRAMFILES32\\${INSTALL_APPEND_PATH}\" --INSTALL_DEFAULT_SHOTCUT=1 --INSTALL_DEFAULT_AUTORUN=0 --INSTALL_EXECUTION_LEVEL=\"admin\" --INSTALL_MODE_ALL_USERS=\"all\" --INSTALL_DOWNLOAD_BASEURL=\"http://www.ggniu.cn/test_online_install/\" --PRODUCT_LEGAL=\"Leeqia Copyright（c）2020\" --PRODUCT_PUBLISHER=\"Leeqia\" --TEST_SLEEP=0",
    "dist": "electron-builder --win "
  }
}

At this point, all configurations have been set up. During the electron-builder packaging process, the value from the "version" field in the package.json will replace the corresponding field in the script to complete the final packaging. It's quite simple, isn't it?

Once again, please note that for other basic parameters, such as whether to start with the system, whether to create a desktop shortcut, please refer to the "The Road to Beautifying the UI of Installation Packages - Visual Configuration Guide for nsNiuniuSkin Installation Package Creation" for configuration.

3. Execute packaging and wait for results

Execute the packaging command:

npm run build

This process will automatically perform the following tasks:

• Electron-builder packaging, generating unpacked files
• Copy files from the unpacked files directory to the nsNiuniuSkin's directory for packaging
• Execute nsNiuniuSkin's packaging process, producing an installation package with a beautiful interface and enhanced functionality
• Generate the latest.yml file based on the installation package name and version number

After patiently waiting, the final generated installation package looks like this:

At this point, we have generated the installation package and, at the same time, created the latest.yml for use in electron-updater's upgrade detection. Simply publish the installation package and latest.yml to the server, and the automatic upgrade process will seamlessly connect.

The runtime effect is as follows:

How to make the installation package produced by nsNiuniuSkin compatible with the previous one produced by electron-builder

If it's a completely new project and no native installation package produced by electron-builder has been released before, you don't need to pay attention to this part.

If there are already old installation packages produced by electron-builder released online, and the ones produced by nsNiuniuSkin need to be compatible, you need to consider the following issues:

• Registry entries for installation information in the registry
• Whether to install for the current user or all users, and whether the installation package starts with administrator privileges
• Extended installation path (ensure the last layer of the installation path is consistent; this can be obtained by installing the old installation package and finding its installation path)

To achieve compatibility with the old version, it's actually very simple. Obtain the core installation information of the old installation package, and set it in our visual configuration guide.

1. Get the configuration information of the old installation package

If the above information can be found in the original package.json with clear configuration values, simply apply these values to the visual configuration guide. If not configured, extract from the old installation package using 7zip to obtain an nsi file. From this file, extract the following script code:

StrCpy $_18_ CurrentUser
SetShellVarContext current
ReadRegStr $_19_ HKCU Software\Test_Capture InstallLocation
StrCmp $_19_ "" label_321
StrCpy $INSTDIR $_19_

Where:

• SetShellVarContext current indicates installation for the current user, indirectly implying that the installation package starts with non-administrator privileges.
• Software\Test_Capture following "Software\" represents the name of the entry in the registry where the software installation information is stored. It should match the "guid" in our package.json. If "guid" is not configured, this might be a GUID string.

With the above information, we now have all the required details:

• Installed for the current user.
• The installation package starts with regular user permissions.
• The name of the entry in the registry where software installation information is stored is "Test_Capture."
• The key name in the registry where the software installation path is stored is "InstallLocation" (default for all Electron programs).

2. Explanation of Visual Configuration Options Compatible with Old Installation Packages

In custom configuration macros, multiple parameters are interrelated, such as the default installation location, installation package execution permissions, and whether to install for all users:

1. If installing for all users, it is necessary to enable administrator execution privileges for the installation package, and the default installation path should be a path unrelated to a specific user.
2. If installing for the current user, it is recommended not to enable administrator privileges, and the default installation path should be $APPDATA${INSTALL_APPEND_PATH} or $LOCALAPPDATA${INSTALL_APPEND_PATH}.

The corresponding adjusted configuration is as follows:

With this configuration, following the operations in the three-step process mentioned above will allow you to package an installation package compatible with old versions for seamless upgrading!

Conclusion

Each parameter in the nsNiuniuSkin visual configuration guide corresponds to a command-line parameter in package.py. We now provide further explanations. After generating the command line, integrate it into the electron-builder packaging process to further simplify the packaging process. We hope this helps with packaging Electron programs!

During the installation package installation process, a beautiful UI often leaves a more lasting impression on customers, reflecting the software service provider's focus and dedication to user experience! We hope our efforts can make package creation a bit easier and more enjoyable!

May there be no difficult installation packages in the world!