How to deploy an Electron app as an executable or installable in Windows?

Question

I want to generate a unique .exe file to execute the app or a .msi to install the application. How to do that?

I found the following article to be helpful, which gives example using electron-builder: https://medium.com/how-to-electron/a-complete-guide-to-packaging-your-electron-app-1bdc717d739f — jsherk, Jan 06 '19 at 17:05
@oldboy Yes looks like that users account was suspended. However I found article on waybackmachine here: https://web.archive.org/web/20190119061950/https://medium.com/how-to-electron/a-complete-guide-to-packaging-your-electron-app-1bdc717d739f — jsherk, Feb 10 '20 at 18:22
@jsherk 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?](https://stackoverflow.com/q/60143077/7543162) — oldboy, Feb 10 '20 at 21:59

score 54 · Accepted Answer · answered Jul 08 '15 at 08:40

54

You can package your program using electron-packager and then build a single setup EXE file using InnoSetup.

answered Jul 08 '15 at 08:40

Alex Warren

7,187
2
31
30

Thank you Alex, I packaged the app using electron-packager but I got files with .dll extensions and the best solution for me is to have a single file like the mac os alternative which does not need to be installed. Is there an other way to do that? – Amirado Jul 08 '15 at 08:47
1

Not as far as I know. A Mac .app file is actually a bundle of files itself, it's just the OS hides that from you. There's nothing equivalent for Windows. So if you want to distribute a single EXE file, it either needs to be a setup file or something like a self-extracting ZIP. – Alex Warren Jul 08 '15 at 08:51
what is self-extracting ZIP and how to make it? – Amirado Jul 08 '15 at 08:56
You can create a self-extracting archive using 7zip. It's just a ZIP file packaged up as an EXE - when run it unzips itself. – Alex Warren Jul 08 '15 at 09:23
3

Just build my app using the electron-packager, but my source files are not compiled, is that normal? :) I thought everything was going to go inside the exe?! :( – NiCk Newman Nov 15 '15 at 04:05
I have to second @AlexWarren's recommendation to zipping up the packaged app into a self-extracting zip file. One thing I like to do is zip the entire app folder using 7-Zip so when the end-user extracts it it will still be in a folder that I name. – Kramer Nov 17 '16 at 18:44
You can use https://github.com/electron/windows-installer or https://github.com/unindented/electron-installer-windows to build install apps using Squirrel.Windows. You'll get an installer in both EXE and MSI (requires Windows for MSI, it can't be built in wine/mono). This way you can use the same tools that built the executables (electron-packager) to build the Installers. – databyte Jan 24 '17 at 01:58
And it seems that actual single executable support would require upstream changes to electron itself: https://github.com/electron-userland/electron-packager/issues/628 :-( – Ciro Santilli OurBigBook.com Apr 02 '17 at 07:51
what is innosetup? is it still necessary to create a "non-portable" application/executable? – oldboy Oct 19 '19 at 12:26
is `electron-packager` still the best option in 2020? – oldboy Feb 09 '20 at 05:58
@oldboy electron-packager just works for me. Don't know whether it's the best though. – RukshanJS Mar 17 '20 at 08:44

Tharif · Answer 2 · 2019-05-11T06:11:14.570

36

Since most answers dont have step by step instructions on packaging, let me post how i got to package the electron app.

We will be installing electron-packager first.

Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution.

Install electron-packager : run following command in windows cmd

npm install -g electron-packager --save-dev

Next, lets package our app for windowsx64:

electron-packager appdirectory appName --platform=win32 --arch=x64 --electron-version=1.4.3

edited May 11 '19 at 06:11

answered May 11 '19 at 06:06

Tharif

13,794
9
55
77

2

I appreciate your answer. I think it's so much more helpful when people say "the answer is x, this is how you do it" as opposed to "just use x" – zfrisch Sep 01 '19 at 00:20
1

@zfrisch :) happy that you liked post – Tharif Sep 02 '19 at 04:33
1

Just to add to this, I found that to run this command on MacOs, you require wine [which can be installed multiple ways](https://www.davidbaumgold.com/tutorials/wine-mac/#part-3:-install-wine-using-homebrew), I used `brew install wine`. – Matt Oct 29 '19 at 09:29

score 19 · Answer 3 · answered Mar 02 '20 at 15:00

2020 Update You can use electron-builder to create portable .exe file for your electron app. All you need to do is install electron-builder with yarn add electron-builder --dev Then create a package.json file like this(this is just for portable .exe):

{
  "name": "my-electron-app",
  "productName": "electron app",
  "version": "1.0.0",
  "description": "an electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron": "^8.0.2",
    "electron-builder": "^22.3.2"
  },
  "build": {
    "appId": "com.electron.app",
    "win": {
      "target": "portable"
    },
    "portable": {
      "unicode": false,
      "artifactName": "my_electron_app.exe"
    }
  }
}

GorvGoyl · Answer 4 · 2017-10-25T19:19:13.307

There are so many good modules which generate single installer *exe file. Check out any of these:

electron-builder (genrates executable for Windows,Mac and Linux, have server-less app auto-update feature,code signing, publishing etc, less boilerplate)
electron-forge (genrates executable for Windows,Mac and Linux, it not just package apps but helps you create them as well, more boilerplate)
windows-installer (easy to use, light weight, and generates only exe file)

(still confused which one to pick? compare here)

Anavar Bharmal · Answer 5 · 2016-11-30T11:31:43.127

7

You can also try with the electron-boilerplate. Which has 'release' task of gulp and it will create single ready to go executable file for all cross platform. You only need to build application from all three platform to generate particular platform executable.So you don't need to install any third party tool.

edited Nov 30 '16 at 11:31

answered Nov 30 '16 at 10:54

Anavar Bharmal

329
2
7
19

tpikachu · Answer 6 · 2020-06-30T18:05:27.637

To package the electron app as installable or executable. electron-builder should be the best choice. And it's easy to configure and we can use electron auto-updater too. Here is the example of electron-builder.json

{
  "publish": {
    // This can be also 's3', 'github'... based on which server you are using for publish
    // https://www.electron.build/configuration/publish
    "provider": "generic",

    // Feed URL but github provider case, other fields will be required. 'repo', 'owner'...
    "url": "https://myappserver.com/updates/"
  },

  "productName": "My App",
  "appId": "com.myapp.app",

  "directories": {
    // The icon and background in 'buildResources' will be used as app Icon and dmg Background
    "buildResources": "buildResources",

    // output is directory where the packaged app will be placed
    "output": "release"
  },

  // The files which will be packed
  "files": ["src/", "node_modules/", "package.json"],

  "mac": {
    "target": ["dmg", "zip"], // Also can be, 'pkg', ...
    "artifactName": "${productName}-${version}-${os}.${ext}"
  },
  "win": {
    "target": ["nsis", "zip"], // Also can be, 'portable', ...
    "artifactName": "${productName}-${version}-${os}.${ext}"
  },
  "linux": {
    "target": ["AppImage"],
    "artifactName": "${productName}-${version}-${os}.${ext}"
  },
  "dmg": {
    "title": "${productName}-${version}",
    "contents": [
      {
        "x": 300,
        "y": 360
      },
      {
        "x": 490,
        "y": 360,
        "type": "link",
        "path": "/Applications"
      }
    ]
  }
}

Of course, we can add other configurations such as nsis, extraFiles, afterPack, afterSign...

The above are well-used. You can check details and other fields at here https://www.electron.build/configuration/publish

We can define this configuration at the inside of package.json or as an isolated file but the name should be electron-builder.json or electron-builder.yml at the project root directory.

And in addition, for auto-update. We should upload the installers(dmg, exe, appImage) among with zip, blockmap and latest-{OS_Name}.ymlfiles.

Cool. This helps me a lot. Thanks – True Apr 29 '20 at 02:33 — True, Apr 29 '20 at 02:33

Osei-Owusu · Answer 7 · 2021-09-17T16:56:53.237

5

npm install -g electron-packager --save-dev
npx electron-packager <appDirectory> appName --platform=win32 --arch=x64
npx electron-packager <appDirectory> appName --overwrite --asar --electron-version=13.4.0 --platform=win32 --arch=x64 --prune=true --out=release-builds --icon=./build/icon.ico"

edited Sep 17 '21 at 16:56

answered Sep 17 '21 at 16:21

Osei-Owusu

201
3
6

Using electron-packager -- hope this helps – Osei-Owusu Sep 17 '21 at 16:57

score 2 · Answer 8 · answered Dec 23 '21 at 23:10

This worked for me in 2021/2022:

Install Electron Packager globally. Run the following command in command prompt

npm install electron-packager -g

Run the following command in command prompt:

electron-packager D:\sample MySample --platform=win32 --arch=x64

The above command shows the following output:

Packaging app for platform win32 x64 using electron v16.0.5

After 5-10 minutes, it creates the folder with the necessary files and shows the following output in the screen:

Wrote new app to D:\sample\MySample-win32-x64

The above output directory in my case was 1.09 GB in size. So ensure that you have enough space in your hard drive before you run the command mentioned in the 2nd point above.

If you navigate to the above directory, you will see the following EXE file in it:

MySample.exe

Double clicking on the MySample.exe will launch the file with the app ready for your use. Also note that it will work on localhost. So enjoy!

Well, it fails for me with the error "(node:12480) electron: Failed to load URL: http://localhost:3000/main_window with error: ERR_CONNECTION_REFUSED". That address is requested in the webpack generated index.js: "exports.mainWindow.loadURL('http://localhost:3000/main_window')". Any idea? — sntrcode, Jan 30 '22 at 18:07
Without looking at your code, here are some suggestions: 1. In the index.html of your project, make sure the base tag is this: ``. 2. After that, make sure that the routing is correct. 3. What is the main_window? Is that the default component/page to which you route using the `app-routing.module.ts` file? If yes, try to run your project locally first, before trying to create an Windows app out of it. Try the above and check if anything helps. — Devner, Jan 30 '22 at 18:41

score 1 · Answer 9 · answered Oct 13 '16 at 12:45

well ... this will work but the idea is to run the .exe without need of install it in the pc ... another solution is use Autoplay media Studio for wrap you package generated by electron and make one executable or other solution is to use thinstall vmware... The cons both are commercial so you have to paid for them...

score 1 · Answer 10 · answered Jul 25 '22 at 03:22

You need to install electron-packager

You can follow the below steps.

# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g

electron-packager <sourcedir> <appname> --platform=win32 --arch=x64

Here is an example command.

electron-packager . app --platform win32 --arch x64 --out dist/

score 0 · Answer 11 · answered Nov 02 '21 at 09:25

0

There's a lot of solutions, I recommend using the 3rd option but these are all the ones I know

Use electron-packager
Use electron-forge
Try this: https://stackoverflow.com/a/69807948/15233276

answered Nov 02 '21 at 09:25

Shaurya Chhabra

54
6

score -1 · Answer 12 · answered Dec 19 '18 at 14:51

-1

I first tried the electron-packager but it produced a lot of .dll files and still could not run.

What did work for me was:

npm install
npm run dist --ia32

This produced a single self contained exe, no other files needed to run the application.

answered Dec 19 '18 at 14:51

nivs1978

1,126
14
20

is this `npm install electron-builder` ? – KansaiRobot Apr 18 '19 at 06:13
@KansaiRobot this is another way of packaging electron apps – Slycreator Nov 14 '19 at 21:19

score -2 · Answer 13 · answered Dec 06 '16 at 22:38

-2

You might be able to "wrap" the entire electron app in a .NET project. Then the single executable that it creates can then just "internally" run the electron app.

answered Dec 06 '16 at 22:38

selanac82

2,920
4
27
37

How to deploy an Electron app as an executable or installable in Windows?

13 Answers13

Linked

Related