electron 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:
... 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 | |
| 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 | |
| 1.2.3 | There are more between this and 1.4.7, but there were too many to list out | 2016-06-16 |
| 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 |
Hello World!
Setup
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
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:
Congratulations! You've successfully created your first Electron app.
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
