Create Cross-Platform App with Electron and Onsen UI

Electron, formally known as Atom Shell, allows people to use web technologies to build cross-platform applications. Unfortunately, Electron hasn’t supported any Hybrid App Framework so here comes Onsen UI! In this blog post, we will try to integrate Onsen UI framework into a demo Electron app to see how it works.
Installation and Setup
Note that our development environment is following:
- Electron: v0.36.2
- OnsenUI: v1.3.14
- AngularJS: v1.4.8
Installation
First, let’s install Electron. We can simply use npm
to install.
$ sudo npm install -g electron-prebuilt
Project Setup
Now, we need to create an /electron-sample
dir and generate package.json
file executing the following commands:
$ mkdir /electron-sample
$ cd /electron-sample
$ npm init -y
In package.json
file, modify and include main.js
for Electron.
Create A Project
A minimum Electron app is structured in this way:
.
├── ./index.html
├── ./main.js
└── ./package.json
main.js
should contain the script that runs in the main process.
Right now, we simply display Hello World
in index.html
.
Execution
Under the project root directory (/electron-sample), we can run the following command:
$ electron .
Now, you should see something like this.

Integrating Onsen UI
Download Onsen UI using bower:
$ sudo npm install -g bower
$ bower install onsenui
Now, our directory should look like this.
.
├── ./bower_components
│ ├── ./OnsenUI
│ └── ./angular
├── ./index.html
├── ./main.js
└── ./package.json
Modification
Let’s modify index.html
in order to display a simple Onsen UI toolbar.
Run Electron like earlier.
$ electron .

Displaying Tab bar
Adding a tab bar is very easy with Onsen UI. Let’s insert it inside the <body>
tag in index.html
as follows:
Run electron .
command in the same way. Click on any tab to see page transitions.

Compatibility
I noticed that some of the Onsen UI elements, such as sliding-menu or carousel, had conflicts with Electron due to Hammer script. Also, touch/swipe events had compatibility issues with Electron. Hopefully, those issues will be resolved in a future release, bringing also support to AngularJS directives.
Conclusion
Today we have seen how to quickly implement an Electron application with Onsen UI. There were a few conflicts which should not affect the development if your AngularJS skills are good. Onsen UI and Electron combination will certainly be a great choice for developing cross-platform applications.
I hope this tutorial helped you.
Happy coding!