Since its initial release, nsNiuniuSkin has gained favor from many companies due to its simplicity, cleanliness, and efficiency. More and more companies are now adopting our solution to create installation packages!
Evolving from a simple installation package UI plugin to a comprehensive solution integrating aesthetics, security, simplicity, and automation has not been easy. We appreciate the trust of all our friends!
There are many articles online about beautifying Electron installation packages, using Sciter, QT, or integrating with our earlier versions. Overall, these solutions may have some issues:
Now that Electron applications are widely used, the creation of Electron application installation packages inevitably involves us. After examining the source code of electron-builder and electron-updater and reverse engineering the installation package scripts of Electron applications, we understood the mechanism and implemented a seamlessly integrated solution for Electron packaging. It fully supports automation and is compatible with upgrading Electron programs.
Previously, we learned about a friend who spent a month beautifying Electron installation packages, which was truly heartbreaking! With our solution, we hope everyone can complete the installation package creation and integration of the upgrading feature within a day.
Before introducing nsNiuniuSkin's Electron installation package creation solution, we need to clarify several principles:
Electron Builder comes with many templated NSIS scripts. The settings related to NSIS in the package.json file will form a complete packaging script through parameters and templates, ultimately generating an installation package. If you have any questions about packaging and upgrading that you can't figure out, you can find related answers or information in the electron-builder source code.
Here, we will only discuss full updates. The Electron Updater upgrade process is as follows:
Knowing the logic of Electron packaging and upgrading, our Electron packaging solution becomes easier. There are many details to handle, and here we mainly introduce several technical points:
Some may say that Electron's own packaging is like this, what's the significance of what you've done?
The significance is enormous. Let me explain:
Having said so much, it's all theoretical. Let's look directly at the script and effects. No need for complicated configuration—just execute the packaging script.
In the package script directory, we provide electron source code named NiuNiuCaptureElectronDemo, which already includes basic package.json configuration for packaging and basic code related to upgrading.
Some configurations in package.json are 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": {
"target": "dir",
"icon": "app.ico"
},
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:8080/upload/"
}
]
}
}
The above package.json script configuration represents some of our core settings:
We also provide a build-for-electron.bat script, which is already configured to package the application under NiuNiuCaptureElectronDemo by default. The script code is as follows (in actual applications, you only need to modify about 4-5 fields: output_setup_prefix, electron_build_path, shell_all_user_mode, install_execution_level):
@rem Project name for the packaging script
@set project_name=leeqia_general
@rem Installation package name prefix
@set output_setup_prefix=LeeqiaCapture_PC_Setup_
@rem Main program name (adjust according to your project)
@set main_exe_name=TestCapture.exe
@rem GUID packaged in the electron program, used for the key in the registry (uninstall and software information)
@set electron_guid=
@rem Software version number
@set electron_app_version=
@rem Install for all users or current user, all/current
@set shell_all_user_mode=all
@rem Installation package startup permissions, user/admin
@set install_execution_level=admin
@rem Electron project directory
@set electron_build_path=.\NiuNiuCaptureElectronDemo
@set electron_unpacked_dir=%electron_build_path%\dist\win-unpacked
@rem Read yml file, extract version number and guid information
.\Helper\NSISHelper.exe --mode="get_electron_app_info" --src="%electron_build_path%\package.json" --dst=".\get_electron_app_version.bat"
Call get_electron_app_version.bat
@echo %electron_app_version%
@echo %electron_guid%
@rem Complete installation package name
@set output_setup_file_name=%output_setup_prefix%%electron_app_version%.exe
@rem Package, generate unpacked files (modify this if your packaging script is different; in specific environments, packaging may fail and require adjustment of versions in package.json for electron and electron-builder)
cd %electron_build_path%
call npm run build
Execute build-for-electron.bat to start the packaging process. It will do several things:
The following is the execution process of our packaging script:
After packaging, the final installation package program is as follows:
Installation effects are as follows:
Starting installation:
Installing:
In the previous section, we have packaged the 1.0.0 version installation package LeeqiaCapture_PC_Setup_1.0.0.exe and installed it on the computer. Next, we will demonstrate creating a new version, placing it in the upgrade directory, and triggering the upgrade of the old version.
First, we need to set up a simple static HTTP server by installing the http-server module.
After installation, create a new directory e:\testweb\update, and then execute the following command in the e:\testweb directory: http-server. The upgrade server is now ready.
Change the version field in package.json to 1.0.1, and run build-for-electron.bat again to package. Now, you will get two files:
Copy the packaged installation package and upgrade files to the e:\testweb\update directory, then run the previously installed 1.0.0 version test program:
At this point, a prompt will appear, detecting the new version of the installation package. Click OK to start the upgrade. After the upgrade is complete, the main program will be automatically launched again.
If you have previously published a program through electron packaging, how do you make it fully compatible with the old version when replacing it with an installation package created by nsNiuniuSkin?
This is a very important point and a source of confusion for many Electron developers when switching installation package packaging tools.
The reason we read the GUID from the package.json is to achieve compatibility with old versions. As long as we know it, we can locate the installation location of the original old Electron package in the script, allowing for further overwrite installation.
Of course, there are many details to consider, such as:
Moreover, seamless switching from installation packages made by other similar solutions to our installation package solution is also straightforward:
We have built-in default values for registry key in the script. You only need to modify it to the key used by your old program to ensure that the same registry key is used for reading and writing.
In our packaging solution, we provide two forms of packaging scripts to cater to different packaging needs in various scenarios:
It's called active packaging because the trigger entry for packaging is in our packaging entry script. We provide a script called build-for-electron.bat, where you only need to configure the following points to start packaging (as introduced in the example above):
Passive packaging means that the trigger point for packaging is not on our side but has already been completed by another process, which has packaged the unpacked files and copied them to the directory we want to package. To call our script to package into the final installation package and generate the latest.yml file. If there is already a relatively complete packaging automation process and you just want to switch to the nsNiuniuSkin packaging solution, you can try to call the build-by-external.bat script in your process and pass the specified parameters. The script has many parameters, as shown below:
Call build-by-external.bat project_name electron_guid electron_app_version output_setup_file_name shell_all_user_mode install_execution_level file_pack_path main_exe_name gen_latest
Part of the script code is as follows (the interpretation of each command-line parameter is in the script code):
@rem This script indicates that the external unpacked files of electron have already been packaged, and have been copied to our FilesToInstall. We only need to package them into the final installation package correspondingly.
@rem The script name for packaging, such as leeqia_simple, corresponds to the specific folder name under SetupScripts directory
@set project_name=%1
@rem GUID configured in electron, used to specify the key in the registry
@set electron_guid=%2
@rem Software version number
@set electron_app_version=%3
@rem Complete installation package name
@set output_setup_file_name=%4
@rem Install for all users or current user, all/current
@set shell_all_user_mode=%5
@rem Installation package startup permissions, user/admin
@set install_execution_level=%6
@rem Directory name waiting for packaging files, default is FilesToInstall
@set file_pack_path=%7
@rem Main program EXE name
@set main_exe_name=%8
@rem Whether to generate latest.yml for Electron-related programs packaging
@set gen_latest=%9
@rem Key value stored in the registry for the installation package location
@set install_location_key=InstallLocation
After reading the above introduction and demonstration, do you feel it's quite simple? All the complex logic and interaction points with electron-updater are automatically handled by our installation package solution, providing a unified interface.
The entire process is straightforward. Configure the various parameters in build-for-electron.bat (if your electron-builder configuration file is not set up, you also need to configure it), and then execute this script, and the installation package is ready.
Do you have any questions about beautifying and upgrading Electron application installation packages? Let's discuss together when there's a chance.
In the installation package process, a beautiful UI can often leave a more profound impression on customers about the installed product and better reflect the service provider's focus and care on user experience! We hope our efforts can make the installation package creation a bit easier and more enjoyable! From now on, leave the packaging of Electron programs to us! ^_^
May there be no difficult installation packages in the world!