Apps built on Electron

Supported Platforms

Electron's Structure

Main Process

• Node.js Process

Renderer Process

• Chromium based UI Process
• HTML + CSS + Javascript

ipc & remote

• Main  Renderer Communication

Getting started

# Clone the Quick Start repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start

# Install the dependencies and run
npm install && npm start

Getting started

Main Process - main.js

Renderer Process - index.html

electron.app

const {app} = require('electron');

// Handling Events ...
app.on(EVENT, callback);

app.on('window-all-closed', () => {
  app.quit();
});

// Methods ...
app.quit()
app.dock.hide()

electron.BrowserWindow

// BrowserWindow(options);
const {BrowserWindow} = require('electron')

let win = new BrowserWindow({
    width: 500,
    height: 500
});

electron.BrowserWindow Frameless

let win = new BrowserWindow({width: 800,height: 600,frame: false})

// prevent drag
body(style='-webkit-app-region: no-drag')
    // set drag region
    nav(style='-webkit-app-region: drag;')
        // prevent drag
        button(style='-webkit-app-region: no-drag;')

electron.{ipcMain, ipcRenderer}

const {ipcMain} = require('electron');

ipcMain.on('asynchronous-message', (event, arg) => {
  event.sender.send('asynchronous-reply', 'pong');
});

ipcMain.on('synchronous-message', (event, arg) => {
  event.returnValue = 'pong';
});

// In renderer process (web page).
const {ipcRenderer} = require('electron');
console.log(ipcRenderer.sendSync('synchronous-message', 'ping'));

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg); // prints "pong"
});

ipcRenderer.send('asynchronous-message', 'ping');

electron.Menu - Context Menu

electron.Menu - App Menu

electron.Menu - edit in render process

const {remote} = require('electron');
const {Menu, MenuItem} = remote;
// Context Menu
const menu = new Menu();
menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked'); }}));
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}));
window.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    menu.popup(remote.getCurrentWindow());
}, false);
// Application Menu
const template = [
    // something ...
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

electron-packager

# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g
electron-packager [sourcedir] [appname] --platform=[platform] --arch=[arch] [optional flags...]
electron-packager . --all

packaging in script

var packager = require('electron-packager');
packager({
    platform: 'win32',
    name: 'electron-quick-start',
    arch: 'x64',
    dir: './',
    out: './dist',
    prune: true,
    asar: true,
    'version-string': {
        ProductName: 'electron-quick-start'
    }
}, ()=> {
    done();
});

installer

# OS X
brew install mono wine
npm install --save-dev electron-winstaller
npm install electron-installer-dmg --save-dev
npm install electron-installer-dmg -g

Windows Installer

var installer = require('electron-winstaller');
# Promise Object
var winstaller = installer.createWindowsInstaller({
    appDirectory: 'dist/electron-quick-start-win32-x64',
    outputDirectory: 'dist/',
    exe: 'electron-quick-start.exe',
    setupExe: 'Setup.exe',
    loadingGif: 'loading.gif'
});

winstaller.then(()=> {
    console.log('done');
});

OS X Installer

var createDMG = require('electron-installer-dmg');
createDMG({
    appPath: 'dist/electron-quick-start-darwin-x64/electron-quick-start.app',
    name: 'electron-quick-start',
    out: 'dist/'
}, ()=> {
    console.log('done');
});