Desktop application with Electron

By T89 | Only programming | 9 Jan 2021

Today we tolk about Electron, that is a fantastic framework that allows you to create desktop applications with Javascript, HTML and CSS. You can use Typescript and other framewrok like Angular, React or Vue.js. You can create a single dasktop applications for Windows, Mac and Linux, that's crazy.

The library, made available, allows you to interface with the entire operating system.

Short History

Electron was born in 2013 for building, one year later it became open source. In 2016 Electron 1.0 was release and then Electron grew.
Today, there are too many application that use Electron

Visual Studio

Visual Studio Code












And that is a small part of apps written in Electron, if you want to find out other app go to Electron App.

Create our first basic Electron app

Before proceeding we need to install Node.js, than we need create folder for our project and install Electron, open powershell and type:

mkdir base-electron-app
cd base-electron-app

npm init -y
npm i --save-dev electron

Now we are in this situation


After that we must create main.js. Main.js is the entry point of our application. The script in this file controls the lifecycle of the application, create app's window and performs native operating system interactions.

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true



app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {

CreateWindow is the function to create the main window. This Function is called  when the app is Ready.
Then we create two listener:

  • First for quit the application when it no longer has any open windows;
  • Second for creates a new browser window when the application have no visible windows.

How we saw in the last line of createWindow, we try to load index.html in our window, let's create index.html.

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Hello Publish0x!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <h1>Hello Publish0x!</h1>
    <p style="font-size: 18px;">
        We have create our first Electon app!
        Electron <script>document.write(process.versions.electron)</script>

Now we only do a small changes in package.json

  • Change property "main" in "main.js";
  • Add "start": "electron ." in "scripts" section.
  "name": "base-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.1.1"


Thats all, our app is ready to start, open our powershell and type

npm start

This is the result

Electron Window


Do you like Electron? Do you also want to see other electron features, such as changing the page header or opening new windows or interacting with filesystems?

Let me know


If you like this post, follow me on Twitter Denis


How do you rate this article?



I'm a web developer that want to always improve

Only programming
Only programming

The posts in this Blog want to teach the base of programming and explain basic concepts of programming. The languages we use are: - Typescript / javascript (FrontEnd Angular, BackEnd Deno, Node.js); - C# .net Core (Web api BackEnd).

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.