Electron create MSI installer using electron-builder

Question

I managed to create an .exe installer for windows using electron builder, I create 2 package.json as pointed out in the docs :

https://github.com/electron-userland/electron-builder.

I ended up having a folder with a working .exe

"dist:win64": "./node_modules/.bin/build --platform win32 --arch x64"

The build section of my main package.json is

"build": {
    "app-bundle-id": "org.test.mytest",
    "app-category-type": "public.app-category.graphics-design",
    "osx": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "win": {
      "title": "My awesome app",
      "version": "2.28.999.1",
      "noMsi": false,
      "authors": "Author"
    }
  }

Everything works fine, I have and .exe installer but no way to have an .msi installer that put the content in program files directory.

Instead I ended up with an installation in the C:\Users\UserHome\AppData\Local\electron folder with and installer like below.

Is there a way to have a real .msi installer using electron builder that put the content in the Program file folder. The only one project that worked is this one https://github.com/theodo/electron-boilerplate but it uses a former version of electron-builder.

In the electron doc setting the noMsi to false, should do the trick ...

Should Squirrel.Windows create an MSI installer?

Dogged

Answer 1

You don't actually need an MSI installed to get your app installed into Program Files.

If you disable one click in the nsis config (oneClick), the user is prompted whether to do the single user install (in AppData) or per machine (in Program Files).

If you don't want to give them the choice, you can set perMachine to false which will only allow install into Program Files:

"nsis": {
  "oneClick": false,
  "perMachine": false
},

I would personally leave them the option as they can still install without admin rights!

In the latest version of electron-builder there is also a allowToChangeInstallationDirectory option which allows the user to choose any install location.

Exoergic

Answer 2

as stated in the wiki of latest electron builder release you have to use the msi option within build.win:

"build": {
    "app-bundle-id": "org.test.mytest",
    "app-category-type": "public.app-category.graphics-design",
    ...
    ,
    "win": {
      "title": "My awesome app",
      "version": "2.28.999.1",
      "msi": true,
      "authors": "Author"
    }
  }

Chitwood

im getting a couple of errors: Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json. why cant i have electron as a dependency? doesnt that defeat the whole purpose? anyways, i removed it and tried yarn dist once again, but this time i get the error: Invalid configuration object. electron-builder 22.3.2 has been initialised using a configuration object that does not match the API schema. – Crook

hello? can u help me out? – Crook

it seems you have some bad configuration for elecron builder. Please check the documentation or the scheme to find what's wrong – Chitwood

thanks. i figured out how to do it in the meantime. however, i am having one issue with the desktop shortcut icon displaying properly. do u mind taking a look at my question? – Crook

@Crook Wow wow wow! Hang on... "Electron" is a developer tool to create platform-independent desktop applications based on Chromium engine and Node.js environment. It is NOT a production dependency, but rather a developer dependency. Your software should not include electron itself during distribution! So, when installing "electron", use this command: "npm install electron --save-dev". Otherwise, the entire electron environment (>150 MB) will be unnecessarily included in your installers!!! That is what the error message is telling you! – Clare

@Clare thanks for pointing that. duly noted for the next time i plan to build something with electron – Crook

Answer 3

I figured it out by looking at the target. do this

"win": {
  "target": [
   "msi"
   ]
//your code here
},

Racemic

Answer 4

If all you want is an installer in exe format (I don't know about msi) you can use electron-builder to build the exe unpacked to a directory. Check out the documentation at http://npmjs.org/package/electron-builder. The documentation is pretty straight forward. After you obtain the unpacked folder with your exe , use "Inno Setup Compiler" to create a professional looking installer. Once you get the hang of it , it just takes like 5 minutes to do the whole thing.

Tidy

Answer 5

I haven't gotten this to work either (yet), but my understanding is that it's the opposite (terrible naming).

"noMsi": false // will make an MSI
"noMsi": true // will NOT make an MSI

Mutt

Yeah also understand that but the option doesn't work for me. I see in the script executed that is different --no-msi argument or not but at the end same result no msi installer... – Dogged

Answer 6

You can use "electron-wix-msi" this package to do this task. https://www.npmjs.com/package/electron-wix-msi But first you need to pack resources of your project with Electron-packager or Electron-Builder and then give path of win-unpacked folder as APP-DIR

Fredkin

after creating from wix, msi does not show in 'Add or remove Program' list. – Timeout

Answer 7

This worked for me:

"build": {
    "artifactName": "yourappname.${ext}",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "msi",
      "icon": "assets/logo.ico"
    },

put this in your package.json and run:

electron-builder --win

electron-builder will make a msi for your project

Acetabulum

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach? – Teteak

Answer 8

Use the electron build alone without any MSI installer to avoid such issues.

"scripts": { "serve": "vue-cli-service serve --port 5000", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "vue-cli-service electron:build", "electron:serve": "vue-cli-service electron:serve", "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps" },

Sycamine