Skip to content

Electron

Why Electron

We choose to cover electron as you can easily use it as a front-end application across any platforms (Windows, MacOS, Linux or even a mobile application) for your AI applications.

Installation of Electron

Creating Electron Project

Critical Files

You should have 3 base files package.json, main.js and index.html to have a basic application.

mkdir app
cd app

npm init

touch main.js
touch index.html

Edit package.json

  • When you run npm init, it should create a package.json file. But we need to make some tiny changes to leverage on electron.
  • Key fields
    • name: name of your app, can be anything
    • version: version of your app, can be anything
    • main: main javascript file, we recommend using main.js
    • scripts: here you want to copy the whole scripts section to leverage on electron
    • devDependencies: electron version required
{
  "name": "dlw",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^6.0.8"
  }
}

Edit main.js

This beautiful boilerplate code is provided by Electron, full credits to them.

const { app, BrowserWindow } = require('electron')

// 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 win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  // win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // 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.
    win = 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', () => {
  // On macOS 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', () => {
  // On macOS 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 (win === 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.

Edit index.html

I modified this script from electron's boilerplate code where it will display critical dependencies' versions for your node, chrome and electron.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
  </head>

  <body>
    <h1>Dashboard</h1>

    <h2>Environment</h2>
        <br/>
        Node: <script>document.write(process.versions.node)</script>

        <br/>
        Chrome: <script>document.write(process.versions.chrome)</script>

        <br/>
        Electron: <script>document.write(process.versions.electron)</script>
  </body>
</html>

Starting App

This will start your electron application.

npm start

Packaging Electron App

Wine

The reason for installing Wine is being able to package Electron applications for the Windows platform, creating the executable file app.exe like any other application on Windows. The final aim of our tutorial is to package the app for Windows, MacOS and Ubuntu.

Installation of Wine

This assumes installation on Ubuntu 16.04 xenial, if you're on Ubuntu 18.04 or 19.04, change to bionic and disco respectively.

Also, this works on 64-bit system architecture.

cd ~
wget -qO - https://dl.winehq.org/wine-builds/winehq.key | sudo apt-key add -
sudo apt-add-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ xenial main'
sudo apt-get update
sudo apt-get install --install-recommends winehq-stable

sudo chown root:root ~/.wine

Check Wine Version

wine --version

Packaging Windows Application

This packages the application churning the necessary files and the executable app.exe for windows 64 bit.

electron-packager ./app app --platform=win32 --arch=x64

Comments