This post is trending. 6,711 Views

Let’s Make Desktop Application With Ionic 2 and Electron: Part 2

In part 1 of this tutorial we were able to

  1. Create an Ionic 2 project and serve
  2. Install electron dependencies in our project
  3. Add webpack config and electron main script and run project as electron application

If you don’t know how to carry out above steps I suggest you to follow part 1 of this tutorial.
In this tutorial we will carry on from where we left off and carry out following tasks.

  1. Create a simple angular 2 service access electron apis
  2. Build a redistributable package of our application for different platforms

You guys loved this tutorial so much that I had to Make a video tutorial. Here is the link to the video in YouTube. As this is my first video tutorial, I would love to hear feedback from you guys so that I can improve my next tutorials. Thank you all for your love and support.

1. Create a simple Angular 2 service and access electron apis

In electron there are two processes, the main and renderer process. This comes from chromium architecture. The main process is responsible for creating and managing BrowserWindow instances and various application events. It can also do things like register global shortcuts, create native menus and dialogs, respond to auto-update events, and more. The render process is responsible for running the user-interface of your app, or in other words, a web page which is an instance of webContents. All DOM APIs, node.js APIs, and a subset of Electron APIs are available in the renderer.
In this tutorial we will be creating a angular 2 service which accesses the electron renderer apis. So let’s get started.

Create a simple angular 2 service

You can generate a service using Ionic 2 Cli. In the terminal inside root of your project folder type the following command
ionic generate provider electron
This generates a ionic 2 provider (it’s a angular 2 service). We will use this provider to access electron apis that are available in renderer process.
We need to add this provider to ionic’s provider list, to do that, open src/app/app.module.ts and import Electron
import { Electron } from '../providers/electron
Also add Electron to the providers array.

Import electron and access it’s apis

In order to demonstrate accessing electron apis we will creat a simple zoom in and zoom out function in our app.
Open src/providers/electron.ts and change the code to the following

import { Injectable } from '@angular/core';
import * as electron from 'electron';

export class Electron {
  currentZoom: number = 0;
  constructor() {


  • Here, import * as electron from 'electron'; is importing electron module and making it’s libraries available.
  • currentZoom variable holds the current level of zoom for the page.
  • Two function zoomIn() and zoomOut() carries out the task of increasing and decreasing the zoom level using electron apis.

Now lets, create two buttons and add the functionality to zoom in and out in our home page.
Open src/pages/home/home.html and change the code to following


<ion-content padding>
  <h2>Welcome to Ionic!</h2>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  <button ion-button (click)="zoomIn()">Zoom In</button>
  <button ion-button (click)="zoomOut()">Zoom Out</button>

Here, we just added two buttons that calls zoomIn and out functions.

Open src/pages/home/home.ts and change the code to following

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Electron } from '../../providers/electron';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  constructor(public navCtrl: NavController, public electron: Electron) {

Here, we imported and injected the electron provider that we generated.
Then we created two functions zoomIn() and zoomOut() to call the actual zoom in and out implementation from our electron provider. After this is complete you should have following result


We could have directly imported the electron module and called the functions in here, but we are creating a provider to collect all electron related apis in one place and make it more accessible.

2 Build a redistributable package of our application for different platforms

Now we will learn how we can package our app as a stand alone application for various operating system. And for this task we will use electron-builderpackage. We have already added the dependencies and build scripts in the first part of this tutorial. So lets package our application.
To do this, run the following command from your terminal while you are in the project root
npm run ebuild
This will build your application for the operating system you are currently using
npm run ebuild -l building for linux
npm run ebuild -w building for windows
npm run ebuild -m building for mac
For more details on using electron-builder please visit their repository and read the documentation.

Thank you. Please provide us feedback on what do you think. Will you develop your next desktop application using Ionic 2 and Electron?

Related Posts

Android Launcher App in React Native

A simple custom Android launcher app built with React Native. Find in GitHub A custom Android Launcher made with ReactNative forks.36 stars.1 open […]

Ionic Previewing App in browser Using Ionic Lab

Introduction Ionic framework runs on develop once and deploy anywhere philosophy. It cater to the needs of major mobile platforms namely, Android, […]

%d bloggers like this: