Sirwin
Sirwin
Electronjs

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 Atom.io, 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


Slack

Slack


Fiddler

Fiddler


Discrod

Discorde


Twitch

twitch


Whatsapp

WhatsApp

 

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

6d480fc5050b3b577932589a6a1cbecec9fc9399f8c3cf5f124b9c2ba721707b.png

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
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

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

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

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

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?

1


T89
T89

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.