I cannot get electron-wix-msi running - wix

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).
Install Wix Toolkit as mentioned in docs
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.
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.
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",
]
}
}
Check both files in the folder build
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.

Answer 2

Great tutorial. Your tsconfig.json lacks one line to get "tsc" work, otherwise you will get an error like error TS2307: Cannot find module 'path':
"types": ["node"],