Getting started tutorial for Electron. In this tutorial you will learn how to:
- Install Electron
- Configure the app window
- Pass arguments from the command line to the UI
- Use Node libraries in an electron app
You should have some basic understanding of Node and ES6 in order to understand this tutorial.
If you want to dive straight into the code, the github repo is here.
The App
We are going to build a simple timer app that looks like this:
Get Coding
Install Electron
Install electron-prebuilt globally:
$ npm install -g electron-prebuilt |
Project Structure
Create the following structure and files:
electron-timer-app/ |
Package.json
The package.json content will be:
{ |
main.js
is the entry point of the app and will be picked up by electron when running the app.
App UI
I am going to skip the explanations regarding the HTML and CSS as it’s pretty trivial.
Put the following code in your index.html
file:
|
And use the following css code in style.css
:
@import url(https://fonts.googleapis.com/css?family=Orbitron:700); |
Open the index.html
in your browser to check that its working.
Electron Startup App
The main.js
file is the entry point of the app. It will contain all the code needed to start the app. It will contain:
- Window creation and management
- Parsing of command line arguments
- Communicate information to the UI
Here is the boilerplate code needed to get started. Taken from the official electron documentation:
const electron = require('electron'); |
We are only going to change a few things for now:
App Path:
Because our index.html
is in an app
folder, we will have to modify line 16
win.loadURL(`file://${__dirname}/app/index.html`); |
Disable Dev Tools:
Comment out line 19
//win.webContents.openDevTools(); |
Window size and Appearance:
Replace line 13 with the following
win = new BrowserWindow({ |
With this piece of code, we are making our app window frameless, smaller and non resizable. Check out the full list of properties here. It is amazing what you can do.
Start the App
That’s it we are ready to test the app.
In your project root, launch it by typing:
$ electron . |
A window opens with the timer.
Timer UI Logic
In this part of the tutorial we are going to handle the timer logic (countdown animation).
Because we are in a Node Electron App, we can write our ‘front end’ code using Node JS conventions. Which means that in our /app/index.js
it is possible to use ES6 and require Node modules without the need to package our scripts later on.
The timer will be a simple program that removes one second to the initial time every second and prints out the result.
We will use Moment.js for the timer logic. Install it with:
$ npm install -save moment |
And in our /app/index.js
file
// Require moment.js |
Run the app with electron .
and look at the countdown animation.
Passing the initial Value in the command line
What would be great now is to pass the initial seconds when launching the app, i.e electron . 255
for a 255 seconds timer.
Let’s go and create that.
Get the time value in main.js
We need to capture the time argument in the node app. This is done with the following code:
// Capture command line argument |
Send the value to the UI
The value is sent to the UI using the webContents property of the BrowserWindow Object.
When the HTML and JS app have finished loading, we want to send the value to the UI:
This is done with the following code:
// When UI has finish loading |
Check out the full main.js
code here.
Retrieve the value in the app’s index.js
To retrieve the value, we need to use ipc-renderer.
This module is a simple Event Emitter that can send and listen to events (also known as channels in the doc). Use the on() method to listen to the 'timer-change'
event sent by the win.webContents
above.
// Require moment.js |
You can see the full index.js
here.
That is it ! Start your app with for example
$ electron . 74 |
and observe the result.
I hope you have learnt something useful from this tutorial, it goes a bit beyond the basics by looking at how to use node libs in the client code and at how to communicate between the core and the UI.