Electron + AngularJS - Packing and distribution

Update: This post was written for electron-builder v2. Time passed and stuff changed, so I wrote another series for electron-builder v3.

This is fourth part of introduction series to create application with Electron and AngularJS.

If you've missed, check how to add automatic updates.

Dive right in

As a final step in application development, we'll need to provide binaries for users to install. The easiest way is to use electron-packager and electron-builder. Former is used to create executable binaries for Windows and OS X, and latter is used to pack those binaries in installers for both OS-es.

So before we start, let's install both:

npm install electron-packager --save-dev  
npm install electron-builder --save-dev  

Before continuing, check prerequisites for electron-builder.

To create installers with electron-builder, we should create builder.json which will be used as config for making Windows and OS X installers:

{
  "osx" : {
    "title": "EA Todo",
    "background": "assets/osx/background.png",
    "icon": "assets/osx/logo.icns",
    "icon-size": 128,
    "contents": [
      { "x": 355, "y": 125, "type": "link", "path": "/Applications" },
      { "x": 155, "y": 125, "type": "file" }
    ]
  },
  "win" : {
    "title" : "EA Todo",
    "icon" : "assets/win/logo.ico"
  }
}

We can create handy npm scripts to run builder and packager. We'll just need to add following to package.json:

...
"scripts": {
    "dev": "electron . --enable-logging",

    "clean": "rm -rf ./dist",
    "clean:osx": "rm -rf ./dist/osx",
    "clean:win": "rm -rf ./dist/win",

    "pack": "npm run clean && npm run pack:osx && npm run pack:win",
    "pack:osx": "npm run clean:osx && electron-packager . \"EA Todo\" --out=dist/osx --platform=darwin --arch=x64 --version=0.36.2 --icon=assets/osx/logo.icns --ignore=dist --ignore=assets --ignore=builder.json --ignore=bower.json --ignore=README.md --ignore=.gitignore --ignore=preview.png",
    "pack:win": "npm run clean:win && electron-packager . \"EA Todo\" --out=dist/win --platform=win32 --arch=ia32 --version=0.36.2 --icon=assets/win/logo.ico --ignore=dist --ignore=assets --ignore=builder.json --ignore=bower.json --ignore=README.md --ignore=.gitignore --ignore=preview.png",

    "build": "npm run build:osx && npm run build:win",
    "build:osx": "npm run pack:osx && electron-builder \"dist/osx/EA Todo-darwin-x64/EA Todo.app\" --platform=osx --out=\"dist/osx\" --config=builder.json",
    "build:win": "npm run pack:win && electron-builder \"dist/win/EA Todo-win32-ia32\" --platform=win --out=\"dist/win\" --config=builder.json"
  }
...

You can run any of the scripts with npm run command, i.e.

# Create binaries for both Windows and OS X
npm run pack

# Create installer for OS X
npm run build:osx

# Start app directly
npm run dev  
...

Binaries and installers are made available in dist directory.

We're airborne

Now we can wrap all of our neat application code in one binary and share it with the world.

Note: Created Windows application won't work since we have used local Sinopia instance as npm registry. You can run Sinopia there, or use some public or private npm repository on web and update repository url in project.

All source code is made available on Github.

About Vjekoslav Ratkajec

Software developer from Zagreb, Croatia. Love programming, running, hiking and biking. Adore nature and animals. Also author of this blog.

Comments