Using Electron to Develop Cross-Platform Apps

7 Feb 2017, By: Sanchir Kartiev

The biggest dream of a customer is the approach Develop Once – Run Anywhere that means that you pay once for the development and get an application for three platforms at once: “Windows”, “Linux”, “Mac OS”.

In 2013 NodeJS made a revolution in the world of web development. The model accepted in it differs essentially from the greater part of widespread platforms. The core of NodeJS is a standalone JavaScript virtual machine with enhancements which make it suitable for general-purpose programming. In 2015 Github developed simultaneously a word processor Atom using NodeJS and framework Electron which is the basis of Atom.

Electron embodies a version of NodeJS that is intended to operate in operational system environment, browser Chromium engine and general purpose libraries.

At present (21.12.2016) Electron consists of the following components: Electron 1.4.13, Node 6.5.0, Chromium 53.0.2785.143, V8 5.3.332.47. Electron enables developing an application logic via NodeJS and realizing representation using such web-technologies as HTML, CSS, JS. V8 engine and NodeJS allow implementing the same code on Windows as well as on Linux/MacOS. Now we will analyze the process of developing a simple Electron application using WebStorm. Create an empty project NodeJS.

Call the command:

npm init

npm install –save-dev electron-prebuilt fs-jetpack asar rcedit q

Create 2 package.json files. The first provides with electron packages, and the second one is placed in app folder and provides packages for the usage of the application itself.

App/main.js is the main point of entry into the application. For a start we will determine the basic modules which we need to launch an Electron application:
1) Application lifecycle management module:

var app = require(‘app’); 

2) Browser window management module:

var BrowserWindow = require(‘browser-window’);

3) Browser main window management module:

var mainwindow = null;
Then we will define events activated by the application:
app.on(‘window-all-closed’, function() {
	if (process.platform != ‘darwin’) {

Here, when all windows are closed, we will close the application, except for Mac OS where applications do not close upon the closing of windows.

app.on(‘ready’, function() {
	mainWindow = new BrowserWindow({width : 800, height : 600});
	mainWindow.loadUrl(‘file://’ + __dirname + ‘/index.html’);
	mainWindow.on(‘closed’, function() {
		mainWindow = null’

When the application is ready to be opened, we create a browser window and download the view from index.html.

<h1>Hello World! </h1>

Launch the application from command line using the following command:

electron app

Electron and AngularJS interactionAngularJS is used within the approach of building MEAN application to realize NodeJS applications front-end part. Also it can be exploited as a framework for GUI development for Electron. However we get a question: how could we achieve interaction between AngularJS and Electron? And the answer is ipcMain Electron module.

var ipcMain = require('electron').ipcMain
ipcMain.on(‘getSomething’, function(event, arg) {
	event.returnValue = ‘something’;

In front-end part we can use this approach with the help of the following code:

var ipc = require('electron').ipcRenderer;
   var response = ipc.sendSync('getSomething');

This code as a result makes the front-end part to send a call to ipc for getSomething method, which writes ‘something’ into the value that this function will return. On the last stage something is output to browser console. Thus we established the mechanism of communication between front-end and back-end, which enables designing the architecture on the basis of corporate application integration templates using the communication mechanism. The application has been developed. What’s next to do? We need to assemble the application to enable launching it as an individual independent EXE without open source code. To carry out the assembly we need to develop a script that copies the main Electron part, cleans runtime from unnecessary files, creates archives and updates the resources.

function copyElectron() {
    console.log('Copying electron' + projectDir.path())
    return projectDir.copyAsync('./node_modules/electron-prebuilt/dist', buildDir.path(), { overwrite: true });

function cleanupRuntime() {
    return buildDir.removeAsync('resources/default_app');

function createAsar() {
    var deferred = Q.defer();
    asar.createPackage(appDir.path(), buildDir.path('resources/app.asar'), function () {
    return deferred.promise;

function updateResources() {
    var deferred = Q.defer();
    projectDir.copy('resources/windows/icon.ico', buildDir.path('icon.ico'));
    var rcedit = require('rcedit');
    rcedit(buildDir.path('electron.exe'), {
        'icon': projectDir.path('resources/windows/icon.ico'),
        'version-string': {
            'FileDescription': manifest.description,
    }, function (err) {
        if (!err) {
    return deferred.promise;

function rename() {
    return buildDir.renameAsync('electron.exe', + '.exe');

gulp build

On return we get EXE file, which can be launched on Windows, Linux or Mac OS platform.In the summary of our article we can include writing the basic structure of simple Electron application, which shows Hello World HTML page, description of the mechanism of communication between Electron and Angular and process of assembling EXE without source code.

Recent Articles and News

More articles from Mentalstack

Using Electron to Develop Cross-Platform Apps

The biggest dream of a customer is the approach Develop Once – Run Anywhere that means that you pay once for the development and get an application for three platforms at once: “Windows”, “Linux”, “Mac OS”.

How to Find a Top Web or Mobile Developer

Finding a web or mobile app development team is not that difficult, it is finding the right one for your business that can be tricky. The right partner can add value in more ways than just development, which will help you to maximize revenues for your app business. Furthermore, save you from some fuss later on, as a warranty comes with every single app they craft.

Micro Service Architecture using Nancy

From the moment when micro service architecture appeared, people increasingly notice its similarity to service-oriented architecture (SOA). In fact SOA was ahead of time and at the height of its development wasn't so popular with software developers. What are the advantages of micro service architecture?