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.
We are going to build a simple timer app that looks like this:
Install electron-prebuilt globally:
Create the following structure and files:
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.
I am going to skip the explanations regarding the HTML and CSS as it’s pretty trivial.
Put the following code in your
And use the following css code in
index.html in your browser to check that its working.
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:
We are only going to change a few things for now:
index.html is in an
app folder, we will have to modify line 16
Disable Dev Tools:
Comment out line 19
Window size and Appearance:
Replace line 13 with the following
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.
That’s it we are ready to test the app.
In your project root, launch it by typing:
A window opens with the timer.
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:
And in our
Run the app with
electron . and look at the countdown animation.
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:
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:
Check out the full
main.js code here.
Retrieve the value in the app’s
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
You can see the full
That is it ! Start your app with for example
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.