Chained msi Installer with Electron

问题

I'm new to Electron and I am building an app that I would like to install on Windows. I read the documentation on how to distribute your app in Electron's docs, and I know about:

electron-forge
electron-builder
electron-packager

Currently I'm working with:

"electron-builder-squirrel-windows": "^19.20.0",
"electron-builder": "^19.20.0",
"electron": "^1.6.11"

Given this, I was able to create a Setup.exe to install my App, BUT I was not able to create any UI for the installation process.

I want to give the option to the user to change the installation path if he needs, show eventual Licences I want him to accept, ...

No information on this is given on the electron.atom.io

Look at Atom editor or Slack, that are built with Electron, I can see that it is possible to show some UI during the installation. How is this usually done?

Edit: I just read about windows-installer that you need to use squirrel events for this Edit Edit:

• Changing title to "Chained msi Installer with Electron"

Notice that the first time the installer launches your app, your app will see a --squirrel-firstrun flag. This allows you to do things like showing up a splash screen or presenting a settings UI.

回答1:

As an alternative to using the entire electron package stack for developing Windows MSI installation delivery, you might consider using the following mechanisms as another useful solution:

1. webpack - to build your application client distributable
2. electron-packager - to build your electron binaries (in this case for Windows)
3. WiX tool set - to build your Windows MSI installers.

Of course, you have to do steps 1 and 2 regardless of what kind of installer you choose to employ. I've found webpack to be the most stable, configurable and complete solution for packaging an angular web app (which is what I work on), and electron-packager is the one tool you can't get around using if you want to actually build platform specific binaries for your app.

In our case, I use gulp scripts to wrap the webpack and electron-packager modules, which I call via their API's rather than their command line derivatives in order to maintain them in a consistent javascript context for ease maintenance and error handling in the build process (command line solutions are much more difficult to scope and re-purpose than packages, modules, files and functions in javascript, imo).

This can be explained a bit easier by understanding what kind of project I am referring to. This is specifically if you are building an electron application that has a full project structure such as this:

C:.
+---assets/
+---ClientSide
¦   +---index.html
¦   +---app
¦   ¦   +---app.component.ts
¦   ¦   +---app.module.ts
¦   ¦   +---main.ts
¦   ¦   +---AppContent/
¦   ¦   +---help/
¦   ¦   +---modals/
¦   ¦   +---panels/
¦   ¦   +---shared/
¦   +---Styles
¦   ¦   +---dist/
¦   ¦   +---svgs/
¦   +---test
¦       +---AppContent/
¦       +---modals/
¦       +---panels/
¦       +---shared/
+---dist/
+---edist
|   \---Application-win32-ia32 [*location of binary source for the install]
+---ServerSide
¦   +---app.js
¦   +---server.js
¦   +---test/
+---Installer
    +---buildMSI.bat
    +---Application/

gulpfile.js
karma.conf.js
main.js
package.json
README.md
webpack.config.js

This kind of structure shows a project that has all the parts that you'd want in a real dev environment such as webpack, configuration, karma (client side testing), gulp for packaging operations (wraps operations for webpack, electron packager), windows batch file for running WiX commands, and more.

The flow of such an approach would be (probably documented in your README.md) something like these steps for new users setting up and building your project:

1. git clone <project/path> -- clone the repo to your local machine
2. npm install -- load/install the node_modules
3. gulp lint -- Validate code and produce CI results. (your choice of linters)
4. gulp test -- Run server side and client side unit tests, produce code coverage CI results for each
5. gulp build_web_client -- Build the client side web project using webpack API calls. This should produce a directory called "dist" created under the project
6. gulp build_electron_app -- Build the Electron executable using electron-packager API. This should produce a directory called "edist" created under the project.
7. cd Installer
8. buildMSI.bat -- this Windows batch script should do the following steps:
   1. prepare the manifest file (resulting in a .wxs file) by harvesting the content listing of the /edist directory (seen in the directory tree structure above and created by step 6) by using Wix command heat.exe
   2. preprocess and compile the project into and object (.wixobj) using Wix command candle.exe
   3. link the Wix project into its final installable file form using Wix command Light.exe, generating the install MSI files.

This is just one suggestion. You can, of course, use other tools for each of the steps as you choose best. This is just one approach that I've found works well for development of electron applications for deployment to a Windows target. The nice thing about this is that with Electron, you could choose to build to many target OSes, using steps 1-6, and then have different deployment approach if you wanted to go to Windows or Mac, Linux for steps 7 and 8.

Yes, it is true, you could use electron-builder (or electron-forge for those with simple needs) to package your app via Squirrel as a way to deploy to all OSes available to electron (which would mean replacing my steps 7 and 8 with those packaging alternatives). From my experience, and for our context, the Squirrel solution to Windows deployment seemed less desirable than using Wix for deployment.

To your original question about configurability to your installation, the nice thing about using Wix is that you get with it the ability to completely customize your installation UI and experience (including target pathing).

回答2:

You can not select the installation path on Windows when you use Squirrel. It also does not seem to be there in the future. They do not want to support that. See here and here.

来源：https://stackoverflow.com/questions/45984273/chained-msi-installer-with-electron