Electron combat: Create a Window App installation package for electron development

Introduction: When studying electron automatic update, in Electron Official document Auto-updater , mentioned in several platforms Mac,Linux,windows under Electron Automatic Update method, which Windsow platform above, the article recommends first use grunt-electron-installer module to create Windows Installer package,Grunt This tool is integrated by Squirrel. Then learn about the Squirrel tool, a tool that you can use to Uninstall and add shortcuts to the installation updates for electron applications. This article mainly mentions how to create an . EXE installation package for electron under Windows platform with Squirrel.

Create a NuGet package

Our approach is to use the NuGet tool to create the NuGet package, and then use the Squirrel tool to create the . exe.

1. Download squirrel.exe and nuget.exe, or you can choose to install the squirrel.windows directly (requires a vitual studio environment).

2. Create a new folder such as my-build, download the squirrel.exe,nuget.exe and setup.exe

Put it in, and put in a folder our unpackaged electron applications, such as:

4. In the my-build root directory, open the command line to execute the nuget spec

Such as:

Generate Spec Package initial file

5. The editor opens Package.nuspec, editing the file as needed for your project, such as:

Note: According to the squirrel documentation, thetarget folder property needs to be set to lib/net45, otherwise it will not be used;<iconUrl> tags are used to make future exe icon.

5. Create a NuGet package with the following command,

NuGet Pack Package.nuspec

Such as:

This package will then appear in the directory

The naming convention is <my_app_name>.<version>.nupkg .

To create the Setup program

Once the application is packaged into a NuGet package, you can create a setup program with Squirrel. Open the command line at the root directory and execute the following command:

Squirrel--releasify <my_app_name>.<version>.nupkg

This time there is no prompt in the command line. But don't panic, after compiling a period of time the program will create a release folder with three files,NuGet packages,releases files and installation files Setup.exe. such as:

If you do not see these three files, you can view the SquirrelSetup.log in the directory , according to the error inside, to debug.

Note that the Squirrel command above can be used to set setup.exe to use traditional icon or custom image files during the installation process. Use Squirrel--help to see more help

Publish Apps and install apps

Send the Setup.exe generated in the previous step to the user who wants to install the app.

The final application will be installed in the C:\users\administrator\appdata\local\[appname] folder, note that the Squirrel log file also exists in the directory, debugging installation problems is very useful.

Double-click our setup.exe to install the app test, if there is any error in the middle,

C:\Users\Administrator\AppData\Local\SquirrelTemp you can see the installation log inside. Such as:

After installation open the C:\Users\Administrator\AppData\Local directory, you can see the app installed here, such as:

Automatically create shortcuts

Enter the folder after our installation, command line into c:\users\administrator\appdata\local\[your appname], execute Update.exe--help, you can see

Don't know from you haven't got any hint anyway I found out that the command line to manually create shortcut commands is Update.exe--createshortcut electron\electron.exe-i [Your ico toute]\ App.ico

So, if we want the app to silently create a shortcut during the installation process, you'll need to try to execute the code in the opposite direction after the app is installed.

Because our. EXE will open the program automatically after installation, so I main.js in the program entrance , add sqruieel event monitoring. such as:

When I uninstall the program, the listener event that deletes the shortcut is also written in. There are also program updates and delete event listeners, but these two events I haven't tested yet.

Update your App

In fact, I always want to do incremental update, here my Update method has two, the first is to add JS at the entrance of the program, send the request to the server, pull the change file for local replacement, but if it is node_module dependent package changes, this method is not feasible. The second method is more secure and fast by publishing a different version number of the EXE, as follows:1. In step 2 of creating the installer , we have copied the program code into this folder, such as:

If our program is to be updated later, we need to replace the changed files directly with this folder.

2. Open Package.nuspec, edit version label

3. Refer to step 2-4 of the Create installer section in this article to regenerate the Setup.exe and publish the app.

By performing a setip.exe installation, the program will automatically delete the previous app, but I'm not sure if thesqruieel is incremental, or if the entire previous application was deleted and then reinstalled.

Create a Custom installation package

In the previous step, we have already published our own EXE, but if there is no custom name and icon, it seems not cool enough, so we need to create a custom installation file.

1. Download and install Resource Hacker

2. Open the project directory and right-click on the Electron.exe

The menu appears, click Open using Rescource Hacker.

After the 3.Resource hacker app is running, select icon in the following screen, then select Action in the toolbar, Replace icon, such as:

Then select the . ico file that you want to replace.

4. This is not enough, we also need to replace the EXE version of the information, open version info, change filedescription and ProductName to our own project name, it is best to Squirrelawareversion also change, after all, is the version number.

5. After you have done this, we need to follow the previous steps and enter the command line

NuGet Pack Package.nuspec

Regenerate the NuGet package, and then use the

Squirrel--releasify <my_app_name>.<version>.nupkg command to create the installation file.

6. After opening the generated releases folder, refer to step 2-4 of creating the installer section in this article to customize the setup.exe.

Finally, one can be automatically updated and installed conveniently, as well as our own cool icon with the name of the application to create pull!

Electron Combat: Create a Window App installation package for electron development