electron
#electron
Table of Contents
About 1
Chapter 1: Getting started with electron 2
Remarks 2
What is Electron? 2
Apps built on Electron 2
Versions 2
Examples 3
Installation of Electron 3
Dependencies 3
How to install it? 3
Hello World! 3
Setup 3
The Main Process 4
HTML Template & Renderer Process 4
Running the App 5
With electron-prebuilt installed Globally 5
Method 2 - Without electron-prebuilt installed Globally 5
Chapter 2: Electron-tray-app 7
Examples 7
Electron Tray App 7
Chapter 3: electron-winstaller 8
Introduction 8
Syntax 8
Parameters 8
Examples 9
Build JS 9
Chapter 4: Main and renderer process. 10
Remarks 10
Examples 10
Asynchronous IPC communication 10
Remote module RMI 11
Synchronous IPC communication 11
Chapter 5: Packaging an electron app 13
Introduction 13
Syntax 13
Parameters 13
Examples 13
Installing electron-packager 13
Packaging from CLI 14
Packaging from script 14
Making npm scripts to automate Electron packaging 14
Chapter 6: Remote function - use Electron functions in JavaScript 16
Introduction 16
Syntax 16
Examples 16
Using remote by setting the progress bar 16
Using remote by setting window to fullscreen 16
Chapter 7: Using bootstrap in electron 17
Introduction 17
Examples 17
Linking Electron with Bootstrap 17
Chapter 8: Using nedb in electron 18
Examples 18
Installation of nedb 18
Connecting electron app with Nedb 18
Insert Data in nedb 18
Search in nedb 18
Delete in nedb 19
Credits 20
About
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: electron
It is an unofficial and free electron ebook created for educational purposes. All the content is
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at
Stack Overflow. It is neither affiliated with Stack Overflow nor official electron.
The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to [email protected]
https://riptutorial.com/ 1
Chapter 1: Getting started with electron
Remarks
What is Electron?
Electron is an open-source framework, which is used to create desktop applications using HTML
, CSS and JavaScript. In the inside, it works thanks to Chromium and Node.js.
Its original creator, GitHub, works with a wide community of developers to maintain the project,
which can be found here.
One of the main perks of using Electron is that, since it's based in web technologies, it's cross
platform, allowing to deploy applications for Linux, MacOS and Windows, with the same code.
It also features native elements such as menus and notifications, as well as useful developing
tools for debugging and crash reporting.
Apps built on Electron
Some examples of applications that use this framework, are:
• Atom
• Slack for Desktop
• Visual Studio Code
• GitBook
• Curse
• Wordpress for Desktop
... and many others.
Versions
Version Remarks Release Date
1.0.0 2016-05-09
1.0.1 2016-05-11
1.0.2 2016-05-13
1.1.0 2016-05-13
1.1.1 2016-05-20
https://riptutorial.com/ 2
Version Remarks Release Date
1.1.2 2016-05-24
1.1.3 2016-05-25
1.2.0 2016-05-26
1.2.1 2016-06-01
1.2.2 2016-06-08
There are more between this and
1.2.3 1.4.7, but there were too many 2016-06-16
to list out
1.4.7 Lastest version as of 19th Nov 2016 2016-11-19
1.6.11 2017-05-25
1.7.3 Lastest Version as of 19th Jun 2017 2017-06-19
Examples
Installation of Electron
Dependencies
To install electron you must first install Node.js, which comes with npm.
How to install it?
Use npm:
# Install the `electron` command globally in your $PATH
npm install electron -g
# OR
# Install as a development dependency
npm install electron --save-dev
Hello World!
Setup
https://riptutorial.com/ 3
An Electron project structure usually looks like this:
hello-world-app/
├── package.json
├── index.js
└── index.html
Now let's create the files and initialize our package.json.
$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init
Note: If the main parameter is not specified in package.json, Electron will use index.js as the default
entry point.
The Main Process
In Electron, the process that runs package.json’s main script is called the main process. Here we
can display a GUI by creating BrowserWindow instances.
Add the following to index.js:
const { app, BrowserWindow } = require('electron')
// Global reference to the window object
let win
// This method will be called when Electron has finished
// initialization and is ready to create browser windows
app.on('ready', function(){
// Create the window
win = new BrowserWindow({width: 800, height: 600})
// Open and load index.html to the window
win.loadURL('file://' + __dirname + '/index.html')
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object
win = null
});
})
// Quit the app if all windows are closed
app.on('window-all-closed', () => {
app.quit()
})
HTML Template & Renderer Process
https://riptutorial.com/ 4
Next we create the GUI for the app. Electron uses web pages as its GUI, each running in their own
process called the renderer process.
Add the following code to index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Running the App
There are multiple ways to run an Electron App.
With electron-prebuilt installed Globally
First, make sure you have electron-prebuilt installed.
Now we can test the app using this command:
$ electron .
Method 2 - Without electron-prebuilt installed Globally
First, we'll have to enter your app's folder (the folder where package.json is).
There, open up a Terminal/Command Prompt window and type npm install to install the necessary
into that app's folder.
Afterwards, key in npm start to run the app. Keep in mind that your package.json still has to specify
a 'start' script.
If everything worked correctly, you should see something like this:
https://riptutorial.com/ 5
Congratulations! You've successfully created your first Electron app.
Read Getting started with electron online: https://riptutorial.com/electron/topic/4934/getting-
started-with-electron
https://riptutorial.com/ 6
Chapter 2: Electron-tray-app
Examples
Electron Tray App
Adding a icon to your tray-bar
let tray = null;
let mainWindow = null;
let user = null;
app.on('ready', () => {
/**
* Tray related code.
*/
const iconName = 'icon.png';
const iconPath = path.join(__dirname, iconName);
tray = new Tray(iconPath);
tray.setToolTip('AMP Notifier App');
const contextMenu = Menu.buildFromTemplate([{
label: 'Quit',
click: destroyApp
}]);
tray.setContextMenu(contextMenu);
tray.on('click', () => {
app.quit();
});
});
Read Electron-tray-app online: https://riptutorial.com/electron/topic/8160/electron-tray-app
https://riptutorial.com/ 7
Chapter 3: electron-winstaller
Introduction
NPM module that builds Windows installers for Electron apps. It will help to create single EXE for
Electron windows application
Syntax
• Install Globally
• npm install -g electron-winstaller
• Install Locally
• npm install --save-dev electron-winstaller
Parameters
Config Name Description
The authors value for the nuget package metadata. Defaults to the
appDirectory
author field from your app's package.json file when unspecified.
The owners value for the nuget package metadata. Defaults to the
owners
authors field when unspecified.
The name of your app's main .exe file. This uses the name field in your
exe
app's package.json file with an added .exe extension when unspecified.
The description value for the nuget package metadata. Defaults to the
description
description field from your app's package.json file when unspecified.
The version value for the nuget package metadata. Defaults to the
version
version field from your app's package.json file when unspecified.
The title value for the nuget package metadata. Defaults to the
title productName field and then the name field from your app's
package.json file when unspecified.
Windows Application Model ID (appId). Defaults to the name field in
name
your app's package.json file.
certificateFile The path to an Authenticode Code Signing Certificate
certificatePassword The password to decrypt the certificate given in certificateFile
Params to pass to signtool. Overrides certificateFile and
signWithParams
certificatePassword.
https://riptutorial.com/ 8
Config Name Description
A URL to an ICO file to use as the application icon (displayed in Control
iconUrl
Panel > Programs and Features). Defaults to the Atom icon.
setupIcon The ICO file to use as the icon for the generated Setup.exe
setupExe The name to use for the generated Setup.exe file
setupMsi The name to use for the generated Setup.msi file
noMsi Should Squirrel.Windows create an MSI installer?
A URL to your existing updates. If given, these will be downloaded to
remoteReleases
create delta updates
remoteToken Authentication token for remote updates
Examples
Build JS
Here Is basic build file to build executable from electron windows app.
var electronInstaller = require('electron-winstaller');
var resultPromise = electronInstaller.createWindowsInstaller({
appDirectory: 'Your_electron_application_path',
authors: 'Author Name',
description: "Description"
});
resultPromise.then(() => console.log("Build Success!"), (e) => console.log(`No dice:
${e.message}`));
Read electron-winstaller online: https://riptutorial.com/electron/topic/9492/electron-winstaller
https://riptutorial.com/ 9
Chapter 4: Main and renderer process.
Remarks
Process that runs package.json’s main script is called the main process. The main process
creates web pages by creating BrowserWindow instances. Each web page in Electron runs in its own
process, which is called the renderer process. The main process manages all web pages and
their corresponding renderer processes. Each renderer process is isolated and only cares about
the web page running in it.
Examples
Asynchronous IPC communication
Main process source code index.js:
const {app, BrowserWindow, ipcMain} = require('electron')
let win = null
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL(`file://${__dirname}/index.html`)
win.webContents.openDevTools()
win.on('closed', () => {
win = null
})
win.webContents.on('did-finish-load', () => {
win.webContents.send('asyncChannelToRenderer', 'hello')
})
})
ipcMain.on('asyncChannelToMain', (event, arg) => {
console.log(arg + ' from renderer')
if (arg === 'hello') {
event.sender.send('asyncChannelToRenderer', 'world')
}
})
Renderer process in index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World IPC</title>
<script>
require('electron').ipcRenderer.on('asyncChannelToRenderer', (event, arg) => {
console.log(arg + ' from main')
if (arg === 'hello') {
event.sender.send('asyncChannelToMain', 'world')
}
})
</script>
https://riptutorial.com/ 10
</head>
<body>
<button onclick="require('electron').ipcRenderer.send('asyncChannelToMain',
'hello')">click me</button>
</body>
</html>
Remote module RMI
The remote module allows simple RMI (remote method invocation) of main process objects from
renderer process. First create the main process in index.js
const {app, BrowserWindow} = require('electron')
let win = null
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL(`file://${__dirname}/index.html`)
win.on('closed', () => {
win = null
})
})
and then remote process index.html
<!DOCTYPE html>
<html>
<head>
<script>
const {BrowserWindow, app} = require('electron').remote
</script>
</head>
<body>
<button onclick= "let win = new BrowserWindow();
win.loadURL(`file://${__dirname}/index.html`)">new window</button>
<button onclick= "app.quit()">quit</button>
</body>
</html>
Synchronous IPC communication
Create index.js as
const {app, BrowserWindow, ipcMain} = require('electron')
let win = null
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL(`file://${__dirname}/index.html`)
win.webContents.openDevTools()
win.on('closed', () => {
win = null
})
})
https://riptutorial.com/ 11
ipcMain.on('syncChannelToMain', (event, arg) => {
console.log(arg + ' from renderer')
event.returnValue = 'world'
})
and renderer process index.html as
<!DOCTYPE html>
<html>
<head>
<title>Hello World IPC</title>
</head>
<body>
<button onclick="console.log(require('electron').ipcRenderer.sendSync('syncChannelToMain',
'world') + ' from main')">click me</button>
</body>
</html>
Read Main and renderer process. online: https://riptutorial.com/electron/topic/5432/main-and-
renderer-process-
https://riptutorial.com/ 12
Chapter 5: Packaging an electron app
Introduction
When ready for distribution, your electron app can be packaged into an executable file.
Electron applications can be packaged to run on Windows (32/64 bit), OSX (macOS) and Linux
(x86/x86_64).
To package your code, use the npm package 'electron-packager\
https://github.com/electron-userland/electron-packager
Syntax
• $ electron-packager
• sourcedir
• appname
• --platform=platform
• --arch=arch
• [optional flags...]
Parameters
Parameter Details
sourcedir The directory of your electron application files
appname The name of your application
The platform you want to compile your code for. Omitting this will compile for the
platform
host OS
The system architecture you want to compile your code for. Omitting this will
arch
compile for the host arch
Examples
Installing electron-packager
# for use in npm scripts
npm install electron-packager --save-dev
# for use from cli
npm install electron-packager -g
https://riptutorial.com/ 13
Packaging from CLI
electron-packager C:/my-app MyApp
Packaging from script
var packager = require('electron-packager');
packager({
dir: '/',
}, function(err, path){
if(err) throw err;
// Application has been packaged
});
Making npm scripts to automate Electron packaging
A convenient way to package your application is to write the scripts in your packages.json file and
run them with the npm run command
{
"name": "AppName",
"productName": "AppName",
"version": "0.1.1",
"main": "main.js",
"devDependencies": {
"electron": "^1.6.6",
"electron-packager": "^8.7.0"
},
"scripts": {
"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --
icon=images/icon.png --prune=true --out=release-builds",
"package-win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --
icon=images/icon.png --prune=true --out=release-builds",
"package-linux" : "electron-packager . --overwrite --platform=linux --arch=x64 --
icon=images/icon.png --prune=true --out=release-builds"
}
}
And to run them you just write:
npm run package-mac
npm run package-win
npm run package-linux
A breakdown of the command flags is:
electron-packager . // this runs the packager in the current folder
--overwrite // overwrite any previous build
--platform=darwin // platform for which the binaries should be created
--arch=x64 // the OS architecture
--icon=images/icon.png // the icon for the app executable
--prune=true // this does not copy your dev-dependencies that appear in your
https://riptutorial.com/ 14
packages.json
--out=release-builds // the name of the folder were the binaries will be outputed
Before, running the scripts change the devDependencies to dependencies as electron-packager
cannot bundle the packages in the devDependencies into the app. In packager.json, change the
word (if it's there or if packages are installed using --save-dev in npm install) devDependencies to
only dependencies.
Read Packaging an electron app online: https://riptutorial.com/electron/topic/8945/packaging-an-
electron-app
https://riptutorial.com/ 15
Chapter 6: Remote function - use Electron
functions in JavaScript
Introduction
If you have to change some things in renderer.js or main.js but you want to do the changes in
index.html, you can use the remote function. It lets you access all the electron functions you need!
Syntax
• use remote like require("electron"):
○ main.js: const electron = require("electron");
index.html: const electron = require("electron").remote;
Examples
Using remote by setting the progress bar
const { remote } = require("electron"); // <- The Node.js require() function is
// added to JavaScript by electron
function setProgress(p) { // p = number from 0 to 1
const currentWindow = remote.getCurrentWindow();
currentWindow.setProgressBar(p);
}
Using remote by setting window to fullscreen
const { remote } = require("electron"); // <- The Node.js require() function is
// added to JavaScript by electron
function fullscreen(f) { // p = false or true
const currentWindow = remote.getCurrentWindow();
currentWindow.maximize();
}
Read Remote function - use Electron functions in JavaScript online:
https://riptutorial.com/electron/topic/8719/remote-function---use-electron-functions-in-javascript
https://riptutorial.com/ 16
Chapter 7: Using bootstrap in electron
Introduction
One of the best front-end frameworks in the web world in twitter bootstrap. As electron is relies on
web browser, we can easily use bootstrap with electron in order to use the power of bootstrap in
our electron framework. The latest version of bootstrap as of today is 3.3.7 and bootstrap 4 is still
in alpha phase.
Examples
Linking Electron with Bootstrap
In order to use bootstrap, there are 2 cases.
1. The electron app is connected to internet
2. The electron app is not connected to internet
For electron apps that are connected to internet, we can just make use of CDN links for bootstrap
and include that in our html files.
The problem comes when we have to take it to offline version where the app is not connected to
the net. In that case,
1. Download bootstrap from Bootstrap
2. Unzip the folder into the electron app
3. In the bootstrap directory, there are css and javascript files.
4. For better understanding, move the bootstrap css files into the CSS folder ( All the styling
files will be in this folder) and bootstrap js files to JS folder ( All the Javascript files will be in
this folder)
5. In your html files , link the html files using the following code
<link rel="stylesheet" href="path_to_the_offline_bootstrap_css_file">
<script scr="path_to_the_offline_bootstrap_js_file"></script>
In this way you can start using twitter bootstrap in electron framework.
Read Using bootstrap in electron online: https://riptutorial.com/electron/topic/10897/using-
bootstrap-in-electron
https://riptutorial.com/ 17
Chapter 8: Using nedb in electron
Examples
Installation of nedb
It's very easy to install nedb.
npm install nedb --save # Put latest version in your package.json
For bower loving people,
bower install nedb
Connecting electron app with Nedb
While building electron apps, usually the backend is in separate folder (js files) and front end is in
a separate folder (html files). In the backend, in order to use the database, we have to include the
nedb package with the require statement as follows.
var Datastore = require('nedb'),db = new Datastore({ filename: 'data.db', autoload: true });
Keep in mind that the loading of the database file is an asynchronous task.
Insert Data in nedb
Basically, in order to insert records to nedb, the data is stored in the form of json with the key
being the column names and the value for those names will be the values for that record.
var rec = { name: 'bigbounty',age:16};
db.insert(rec, function (err, newrec) { // Callback is optional
// newrec is the newly inserted document, including its _id
// newrec has no key called notToBeSaved since its value was undefined
});
Be careful with all the operations of database, as they are asynchronous.
Note ** : If _id is not there in the json data that you are inserting then automatically ,it will be
created for you by nedb.
Search in nedb
In order to search for records in nedb, again we need to just pass the json containing the search
criteria as a parameter to the find function of db object.
https://riptutorial.com/ 18
db.find({ name: 'bigbounty' }, function (err, docs) {
// docs is an array containing documents that have name as bigbounty
// If no document is found, docs is equal to []
});
In order to find only one document, as in we use limit in mysql, it's easy in nedb.
db.findOne({ name: 'bigbounty' }, function (err, doc) {
// doc is only one document that has name as bigbounty
// If no document is found, docs is equal to []
});
Delete in nedb
In order to remove documents in nedb, it's very easy. We just have to use remove function of db
object.
db.remove({ name: 'bigbounty' }, function (err, numremoved) { // numremoved is the number of
documents that are removed. });
Read Using nedb in electron online: https://riptutorial.com/electron/topic/10906/using-nedb-in-
electron
https://riptutorial.com/ 19
Credits
S.
Chapters Contributors
No
Alphonsus, Community, Eslam Mahmoud, Florian Hämmerle,
Getting started with
1 Hewbot, J F, Piero Divasto, SimplyCodin, Theo, vintproykt,
electron
Vishal
2 Electron-tray-app Anavar Bharmal, nmnsud
3 electron-winstaller Krupesh Kotecha
Main and renderer
4 mrkovec
process.
Packaging an
5 bigbounty, Dan Johnson, VladNeacsu
electron app
Remote function -
use Electron
6 B. Colin Tim, Florian Hämmerle
functions in
JavaScript
Using bootstrap in
7 bigbounty
electron
Using nedb in
8 bigbounty
electron
https://riptutorial.com/ 20
