Building desktop applications with Electron - System

This tutorial assumes you know how to install and set up electron-quick-start project. You can find the tutorial here.

In this tutorial, we will take a look at a few Node and Electron modules to gather information about the user’s system, application and the screen.

If we navigate to index.html, we can see that we already displayed some of the system info by using Node ‘process’ module and outputting version of Node, Chrome and Electron.

<script>document.write(process.versions.node)</script>
<script>document.write(process.versions.chrome)</script>
<script>document.write(process.versions.electron)</script>

Similarly, we can use another Node module called ‘os’, which will provide info about the operating system. Let’s display our computer hostname from the renderer.js file. First, we will require os package and assign it to the os constant. We will print it out in the console, so let’s write console.log, add string of ‘home dir:’ as a parameter and call the os.hostname() function.

const os = require(‘os’)
console.log('home dir:', os.hostname());

The Electron API also offers a module caled app, which is responsible for controlling the application’s lifecycle. We will display the application path value. Begin by requiring electron package and getting the remote module by using destructuring with curly brackets.

We will use remote module to call app module (which is available only in the main process) from our renderer process. Similar to displaying the os hostname, we will print out the application path in the console by running console.log, passing ‘app path:’ as first parameter and calling remote.app.getAppPath function.

const { remote } = require(‘electron’)
console.log('app path:' , remote.app.getAppPath());

The Electron screen module retrieves information about screen size, displays, cursor position, etc. We will use the screen module to gather information about the available screen to work on and open new browser window with the work area width and height.

Begin by navigating to index.html and adding a button with id of work-area-size and text of Create new window.

<button id=”work-area-size”>Create new window</button>

Now, let’s navigate to the renderer.js file and get the reference to the button by calling document.getElementById(‘work-area-size’) and assinging it to the workAreaSizeBtn constant.

const workAreaSizeBtn = document.getElementById('work-area-size')

Now, let’s create a click event listener on that button reference. This can be done by calling the addEventListener method on the workAreaSizeBtn and passing ‘click’ string as a first parameter and anonymous function with an event as a second parameter.

workAreaSizeBtn.addEventListener('click', function (event) {
})

To get the available work area size we require the ‘electron’ package again and assign it to the electron constant.

const electron = require(‘electron’)

We cannot just define constant screen, because window.screen is a reserved property. Now, to get the available work area, we call electron.screen.getPrimaryDisplay().workAreaSize inside the event listener and get the width and height by destructuring the returned object.

const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize

Our work area width and height sizes are available, so we can use it to define the BrowserWindow width and height. We will create new BrowserWindow using remote module, because we are creating it from the renderer process.

Define new block scoped variable win and assign new instance of BrowserWindow to it by calling new remote.BrowserWindow and providing width and height as a parameter in an object. We will display GitHub website in our BrowserWindow, so we call the win.loadURL method and passing in the string of ‘https://github.com’.

let win = new remote.BrowserWindow({width, height})
win.loadURL(‘https://github.com')