Building a desktop application with Electron

Kristian Poslek
Aug 10, 2015 · 20 min read

The how and what of JavaScript desktop applications

GitHub Electron

Basic assumptions

A 10,000 foot view of Electron


Hello, world!

Accompanying repository

git clone https://github.com/bojzi/sound-machine-electron-guide.git
git checkout <tag-name>
Follow along:
git checkout 00-blank-repository
npm install
git add -A
git reset --hard

Set up shop

Follow along with the tag 00-blank-repository:
git checkout 00-blank-repository
npm install --save-dev electron-prebuilt

Greeting the world

npm start
Hello indeed.

Developing a real application

A glorious sound machine

The. Sound. Machine.

Building the basic feature of a sound machine

Starting point and application organisation

Basic files and folders structure
If you followed along with the "Hello, world!" example:
git add -A
git reset --hard
Follow along with the tag 01-start-project:
git checkout 01-start-project

Defining the rest of the main process

Displaying the sound machine in its own window

npm start
A working sound machine!

Closing the application from a browser window via remote events

Follow along with the tag 02-basic-sound-machine:
git checkout 02-basic-sound-machine
You’ve got mail.

Playing sounds via global keyboard shortcuts

Follow along with the tag 03-closable-sound-machine:
git checkout 03-closable-sound-machine
Plug… er, press and play!

Configuring modifier keys via user settings in a new window

Follow along with the tag 04-global-shortcuts-bound:
git checkout 04-global-shortcuts-bound

Settings button and settings window

Storing and reading user settings

Follow along with the tag 05-settings-window-working:
git checkout 05-settings-window-working
Both main.js and settings.js make use of configuration.js.
npm install --save nconf

What’s on the menu?

Follow along with the tag 06-shortcuts-configurable:
git checkout 06-shortcuts-configurable
Megamenu.
Call me maybe?

Packaging your application

Follow along with the tag 07-ready-for-packaging:
git checkout 07-ready-for-packaging
Wrap it up.
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
electron-packager ~/Projects/sound-machine SoundMachine --all --version=0.30.2 --out=~/Desktop --overwrite --icon=~/Projects/sound-machine/app/img/app-icon.icns
npm install --save-dev electron-packager
Packaging just got a lot easier.
npm run-script package

Additional features to add


Diving deeper into Electron


Is that all?

Developers Writing

Developers may not need to blog; but here your words are not wasted.

Kristian Poslek

Written by

Frontend Engineer at Comsysto Reply and technology nut.

Developers Writing

Developers may not need to blog; but here your words are not wasted.