My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Compile your electron apps to single executable files for both Linux  and Windows desktops

Compile your electron apps to single executable files for both Linux and Windows desktops

Kaveh Taher's photo
Kaveh Taher
·Mar 29, 2019

I recently posted a blog about making desktop apps with electronjs and ng , now I guess it's time to talk about the most interesting part : Compiling.

in this blog post, I describe how to compile your electron project to a single executable and installable app for both Windows and Linux desktops in linux.

The core tool which will handle the most tasks is wine :) if you already don't have it installed on your system, install it :)

sudo dnf install wine

please note that wine is certainly available in all repositories, so whether you're debian user or an arch addict, you must be able to install it with no difficulty. just change the above command with package manager of your distro. I'm just a big fan of Fedora... :)

Now that you got wine installed, it's time to install yarn as well :

Again, it is for Fedora users :) if you use another distro, take a look at installation manual here .

First, you need to add yarn to your repositories, so :

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

Okay, now let's just install yarn :)

sudo dnf install yarn

Okay, now it's time to cd to your project and add our wonderful package builder electron-builder :)

npm i electron-builder --save

once npm finishes installation, we need to make a bit of changes to our package.json :

in your package.json, add the following codes to your "scripts" section :

"electron-dist": "electron-builder",
 "electron-packer": "electron-builder --dir"

so your package.json may seem similar to this one :

{
  "name": "my-desktop-app",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron-test": "ng build --prod --base-href && electron .",
    "electron-dist": "electron-builder",
    "electron-packer": "electron-builder --dir"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "electron-builder": "^20.39.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.3",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "electron": "^4.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

Okay! now it's time to taste the magic :) the following command will make a single executable file for your distro :

yarn dist

and for windows, all you need to do is :

yarn dist --win

and for 32 bit systems just add a --ia32 to command like :


yarn dist --win --ia32

that's all :)

now you can find all compiled files " like .exe files" in dist directory which is located right inside of root of your project :)

thanks for reading :)

yours..

@thel0ner