Electron Builder: Create separate 32 and 64 bits installers for windows

Note: this is a minimal workaround (hacks) and not an absolute and native solution.

If you have been using Electron and Electron Builder for developing your applications and distributing them after, you might have noticed that when trying to build your application on windows (specifically for NSIS or Portable) that both archs (ia32 and x64) are bundled together in one executable.

The purpose for such feature is that on download you don’t have to worry whether your CPU is 32 or 64 bits, then the installer is going to recognize your architecture and install the corresponding version. but I doubt that most people will have problem getting this information, plus to that the download size is doubled, considering how Electron is heavy enough, it might be a good idea to have the installers separated, and after looking at the documentation looks like there is no option to create separate installers for each architecture (easily), the only way is to run the build script twice, once for x64, rename installer or move it, and then another build for ia32. Here is an example using my application, and here are the important parts of my electron-builder.yml:

productName: GeneticPy
artifactName: ${productName}-${arch}.${ext}

win:
  target:
    - nsis
    - portable
nsis:
  artifactName: ${productName}-Installer.${ext}

Here I’m naming my application GeneticPy, notice that I have default artifact name and a special one for nsis (adding -Installer before the extention), this is because I’m also building portable version and they have the same product name (GeneticPy) and extention(exe), the arch is going to be ignored on both so if I build both at the same time they are going to have same name, in result one is going to replace the other, so the artifact name for NSIS is going to be something like this GeneticPy-Installer.exe and portable version is going to be GeneticPy.exe .

and here is the important part of package.json:

{
  ...
  "scripts": {
    ...
    "build": "./node_modules/.bin/electron-builder"
  },
  ...
}

Note: I am going to use yarn by default in my explanation, but replacing it with npm works too.

Since arch is going to be ignored by electron-builder, there is no distinguish between ia32 and x64 and if generated separately, the second build will overwrite and replace the first build’s results.

The next logical approach is going to be building one first (in my case started with x64), rename, create second and rename again (this last rename is optional), and that’s what I did, I added dist:w script to demonstrate the idea:

{
  ...
  "scripts": {
    ...
    "build": "./node_modules/.bin/electron-builder",
    "dist:w": "yarn build -w --x64 && mv dist/GeneticPy.exe dist/GeneticPy-x64.exe && mv dist/GeneticPy-Installer.exe dist/GeneticPy-Installer-x64.exe && yarn build -w --ia32 && mv dist/GeneticPy.exe dist/GeneticPy-ia32.exe && mv dist/GeneticPy-Installer.exe dist/GeneticPy-Installer-ia32.exe"
  },
  ...
}

npm user? replace yarn build inside dist:w script with npm run build -- .

the result is as follows:

Originally published on Medium.