I cannot get electron-wix-msi running

Question

I had problems to get an electron project using webpack to get packed as an MSI installer. I came around electron-wix-msi package. It's a wrapper for the great WIX toolkit. The advantage is, that it is more Windows like.

However, the docs are unclear and not sufficient to get it immediately running. Finally I got it and want to share the steps here.

Answer 1

I used TypeScript for development and got a working installation for all parts, including MSI.

This is for Windows users only. The process describes the creation of an Windows-Installer (MSI).

1. Install Wix Toolkit as mentioned in docs
2. Add path to candle.exe and light.exe, which is "C:\Program Files (x86)\WiX Toolset v3.11\bin" to path variable. Check that if you enter "candle" at prompt the candle.exe executes.
3. Create installation file as make-msi.ts in folder build (just a suggestion, any path will do it):

import * as msi from 'electron-wix-msi';
import * as path from 'path';

// Step 1: Instantiate the MSICreator
const msiCreator = new msi.MSICreator({
    appDirectory: path.resolve('release/win-unpacked'), // result from electron-builder
    description: 'Some text',
    exe: 'MyExe',
    name: 'MyExe',
    manufacturer: 'Joerg Krause',
    version: '0.5.0',
    language: 1033,
    arch: 'x86',
    outputDirectory: path.resolve('release/msi/')
});

async function createMsi() {
    // Step 2: Create a .wxs template file
    await msiCreator.create();

    // Step 3: Compile the template to a .msi file
    await msiCreator.compile();
}
console.log('Invoke MSI Builder');
createMsi();

release/win-unpacked is the output from electron-builder.

4. Add tsconfig.json with appropriate settings in same folder build:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "lib": [
      "es2018",
      "es5",
      "dom"
    ],
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": false,
    "outDir": "js",
    "typeRoots": [
      "../node_modules/@types",
    ]
  }
}

5. Check both files in the folder build
6. Add npm run command like this to your package.json:

cd build && tsc && cd .. && node build/js/make-msi.js

My whole scripts block looks like this:

  "scripts": {
    "dev": "tsc win.ts --outDir ./dist && cross-env NODE_ENV=dev && npm run prev",
    "build": "rimraf ./dist && webpack",
    "start": "rimraf ./dist && webpack && electron .",
    "prev": "electron .",
    "test": "jest",
    "msi": "cd build && tsc && cd .. && node build/js/make-msi.js",
    "pack": "npm run build && rimraf ./release && build --dir && npm run msi",
    "dist": "build"
  }

This compiles the TypeScript into ES and executes the script with npm run msi. After a while you have your MSI.

Also, I had much more success using electron-builder instead of electron-packager.

For those who want to get more, my setup is as this:

• I write my apps with HTML 5 API (no React/Angular or so). I can really recommend this for small and medium apps.
• I use TypeScript 3 for all coding stuff
• I use SASS for all CSS stuff
• Using webpack to compile, optimise and pack
• I use electron-builder to bundle
• I use the process described above to make a Windows package.