ICYROCK.COM

Home

Electron Hello World

2016-May-30 21:21
electron

Here are steps to make a small Hello World application using Electron from scratch.

Install electron-prebuilt

Node module electron-prebuilt is a binary electron distribution. This allows for using electron without having to rebuilt it from source.

In my case, I think installing it globally made more sense than installing it locally for each project, since the binary distribution is ~116 M (for version 1.2.0 at least) and at least in the beginning it is probably not going to be the case that I need a specific version, any will do.

1
2
3
4
5
6
7
8
9
10
11
$ npm install -g electron-prebuilt
/home/icyrockcom/.nvm/versions/node/v4.2.1/bin/electron -> /home/icyrockcom/.nvm/versions/node/v4.2.1/lib/node_modules/electron-prebuilt/cli.js
 
> electron-prebuilt@1.2.0 postinstall /home/icyrockcom/.nvm/versions/node/v4.2.1/lib/node_modules/electron-prebuilt
> node install.js
 
Downloading electron-v1.2.0-linux-x64.zip
[============================================>] 100.0% of 41.33 MB (2.8 MB/s)
electron-prebuilt@1.2.0 /home/icyrockcom/.nvm/versions/node/v4.2.1/lib/node_modules/electron-prebuilt
├── extract-zip@1.5.0 (debug@0.7.4, mkdirp@0.5.0, yauzl@2.4.1, concat-stream@1.5.0)
└── electron-download@2.1.2 (path-exists@1.0.0, home-path@1.0.3, minimist@1.2.0, debug@2.2.0, mkdirp@0.5.1, rc@1.1.6, mv@2.1.1, nugget@1.6.2)

Make a sample project

Make a standard node project using npm:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$ mkdir electron-hello-world
$ cd electron-hello-world
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
 
See `npm help json` for definitive documentation on these fields
and exactly what they do.
 
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
 
Press ^C at any time to quit.
name: (electron-hello-world)
version: (1.0.0)
description: Electron Hello World
entry point: (main.js)
test command:
git repository:
keywords:
author: icyrock.com
license: (ISC)
About to write to /home/icyrockcom/prj/electron-hello-world/package.json:
 
{
  "name": "electron-hello-world",
  "version": "1.0.0",
  "description": "Electron Hello World",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "icyrock.com",
  "license": "ISC"
}
 
 
Is this ok? (yes)
$

Add convenience script

Add a "start" script to your package.json:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "electron-hello-world",
  "version": "1.0.0",
  "description": "Electron Hello World",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "icyrock.com",
  "license": "ISC"
}

That way you can use "npm start" to start your app in electron.

Basic electron app

As seen in the above start script, all begins with the script that you provide to electron. Its task is to launch the main window and manage the lifecycle of that and any other windows as necessary.

Let's make a very minimal app:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var electron = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow
 
var window
 
function onReady() {
  window = new BrowserWindow({
    width: 400,
    height: 350,
  })
 
  window.loadURL('file://' + __dirname + '/index.htm')
 
  window.on('closed', function () {
    window = null
  })
}
 
app.on('ready', onReady)

Also let's make a sample HTML page that we will show from when electron is ready:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
  <title>Electron Hello World</title>
</head>
 
<body>
  <svg width="350" height="300">
    <path
      d="M 245.03232,95.023637 C 198.56297,45.112757 131.76454,9.5985101 65.119554,23.493677 5.9949343,37.158777 -16.411936,132.23289 30.972164,173.75291 c 51.5589,52.96364 144.253446,57.42506 191.207466,117.12229 14.06081,-40.42873 28.51953,-84.5497 53.72289,-115.80847 23.56168,-32.92404 60.7039,-62.14326 61.05324,-107.665253 0.382,-31.51562 -22.20878,-61.4148149 -51.86641,-64.0167269 -32.70993,-5.757054 -83.9693,13.1527969 -101.10147,42.6763869"
      style="color:#000000;fill:#e40303">
    </path>
  </svg>
 
</body>
 
</html>

Result

After "npm start", you get this:

Share the love!