Ionic Electron Desktop App
Wall Script
Wall Script
Sunday, October 14, 2018

Ionic Electron Desktop App

Ionic has an excellent Angular framework for creating mobile applications for iOS and Android. Ionic team is planning to launch an update with Angular 6.0 version, right now Ionic 4.0 is in beta development. This post is about using ElectronJS for JavaScript based applications, using this you can convert an application into a Desktop application for MacOS, Windows and Linux. Take a look at this article and follow the steps to generate a desktop application for Ionic.

Angular  Route Guards with Child Components



Video Tutorial - Ionic Electron Desktop App


Install NodeJS
You need NodeJS to create a development server, download and install the latest version.

Installing Ionic and Cordova
You will find these instructions in Ionic Framework installation document..
$sudo npm install -g ionic cordova

ElectronJS Libraries

ElectronJS
Convert JavaScript, HTML, and CSS applications into cross platform desktop apps. More information check https://electronjs.org/
$sudo npm install electron -g --unsafe-perm=true --allow-root

Electron Packager
Package your Electron app into OS-specific bundles (.app, .exe, etc.) via JavaScript or the command line. Check for more documentation for electron-packager
$sudo npm install electron-packager -g --unsafe-perm=true --allow-root

Electron Installer DMG
Create DMG installers for your electron apps using appdmg.
$sudo npm install electron-installer-dmg -g --unsafe-perm=true --allow-root

Create New Ionic Project
Follow the new ionic v4 documentation. Here --type=angular for getting 4.0 version.
$ionic start ionic-desktop sidemenu --type=angular

$cd ionic-desktop

Install Electron Development Dependencies
npm install --save-dev electron
npm install --save-dev electron-packager
npm install --save-dev electron-installer-dmg

electron-starter.js
Electron configuration file, here you can modify the application width and height. Specify the application build distribution start URL www/index.html. Create this JavaScript file inside the src folder.
const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 1200, height: 700});

// and load the index.html of the app.
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '/../www/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl);
// Open the DevTools.
mainWindow.webContents.openDevTools();

// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
});

app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

package.json
Configure main script with electron start file.
{
"name": "ionic-desktop",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"main": "src/electron-starter.js",
........
........
........
}


index.html
Modify the main index.html file base tag hyper link. You will find this in src folder.
<base href="/" />

to

<base href="./" />

package.json
Include the following script commands for electron-serve, mac-release and windows-release. More information please watch the video.
{
"name": "ionic-desktop",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"main": "src/electron-starter.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"prod": "ng build -prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-serve": "ng build --prod && electron .",
"mac-release": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=src/assets/icon.icns --prune=true --out=release-builds",
"windows-release": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=src/assets/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName='Electron Tutorial App'",
"linux-release": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=src/assets/icon.png --prune=true --out=release-builds",
"mac-build": "electron-installer-dmg ./release-builds/ionic-desktop-darwin-x64/ionic-desktop.app builds/ionic-desktop",
"windows-build": "node src/windows-build.js"
}
}

Electron Build
Use the following command to build the electron app.
$npm run electron-serve

Mac Release
Mac release command, this will create a release files in release-builds folder.
$npm run mac-release

Mac DMG Installer
Generating DMG installation file.
$npm run mac-build

Windows Build
$npm run windows-release

Windows Release
$npm run windows-build

Video Tutorial - Ionic Electron Desktop App


web notification

14 comments:

  1. Is it just me or Ionic/Angular is really hard to use than classics? Or am I missing the point?

    ReplyDelete
  2. Thank for this excellent information

    ReplyDelete
  3. very good blog and i am read in happy very nice post

    ReplyDelete
  4. Very Understandable explanation , Thanks for sharing

    ReplyDelete
  5. Thank you.
    Can you do an update with Angular version 8 ?

    ReplyDelete
  6. node src/windows-build.js

    internal/modules/cjs/loader.js:800
    throw err;
    ^

    Error: Cannot find module 'electron-winstaller'
    Require stack:
    - E:\spiroPro\spiroprodesktop\src\windows-build.js

    ReplyDelete
    Replies
    1. issue sloved
      by following step
      1) run the command > npm install --save-dev electron-winstaller
      2) give your release-builds folder name to your "appDirectory" instate of '/build'
      3) replace .exe name with your exe name

      Delete
    2. can you please make it more clear.

      Delete
  7. How do we do automation testing for ionic based electron app?

    ReplyDelete
  8. > node src/windows-build.js

    Failed with exit code: 1
    Output:
    Fatal error: Unable to set icon

    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] windows-build: `node src/windows-build.js`
    npm ERR! Exit status 1
    npm ERR!

    how to resolve this. pls tell me

    ReplyDelete

mailxengine Youtueb channel
Make in India
X