What is Electron?

Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies: it combines the Chromium rendering engine and the Node.js runtime.

Why use Electron?

Now you might be wondering why you should use electron... well there are a couple of quite convincing reasons:

• Electron is an open source project maintained by GitHub and an active community of contributors, which results in rapid bugfixes & new feature additions.
• It is cross-platform, being compatible with Mac, Windows, and Linux, Electron apps build and run on three platforms.
• You can make apps with Web Technologies ranging from vanilla HTML, CSS & JS to frameworks like React, Angular and Vue.
• Some of the biggest desktop apps are made using electron like VS Code, Facebook Messenger, Twitch, Microsoft Teams.

Getting started

Ok enough blabbering, lets get started with converting your web-apps into desktop apps. First lets install electron with the following command.

npm i -g electron

After the installation completes, open up a new folder and create index.js file.

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

const createWindow = () => {
    const win = new BrowserWindow({ width: 800, height: 600, })
    win.loadFile(path.join(__dirname, 'index.html')) // Assuming the file is located in the same folder
}

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

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

Lo Behold! Your app has been converted into a desktop app in just 14 lines of code. You can run the app using

electron .

PS: Make sure that you have index.html in the given location, else the app will crash. For testing purpose, you can just use a one liner

<h1>Cross Platform App</h1>

But its sub-optimal to develop any application like this, its better to create a proper project using tools like npm or yarn for better package management.

Structuring the App

First initialize the package using

npm init

and add electron as a Dev Dependency

npm i -D electron

Lets create the index.js file

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

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

  win.loadFile(path.join(__dirname, 'gui', 'index.html')) // Assuming the GUI files are in a folder called gui
}

app.whenReady().then(() => {
  createWindow()

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

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

Yeah I did compress the file a bit to fit it in 14 lines 😅.

You should keep the files organized in separate folders (like GUI for the web app files in the example above).

Cons of using electron

Electron does have a couple of cons as well

• Slower than an application built with native GUI components (not noticeable in most cases though).
• Really big package size (compared to native apps)

Projects using Electron

Smartsapp

Web-app: https://smartsapp-ba40f.firebaseapp.com

ruppysuppy / SmartsApp

💬📱 An End to End Encrypted Cross Platform messenger app.

Smartsapp

A fully cross-platform messenger app with End to End Encryption (E2EE).

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Platforms Supported

1. Desktop: Windows, Linux, MacOS
2. Mobile: Android, iOS
3. Website: Any device with a browser

Back-end Setup

The back-end of the app is handled by Firebase.

Basic Setup

1. Go to firebase console and create a new project with the name Smartsapp
2. Enable Google Analylitics

App Setup

1. Create an App for the project from the overview page
2. Copy and paste the configurations in the required location (given in the readme of the respective apps)

Auth Setup

1. Go to the project Authentication section
2. Select Sign-in method tab
3. Enable Email/Password and Google sign in

Firestore Setup

1. Go to the project Firestore section
2. Create firestore provisions for the project (choose the server nearest to your location)
3. Go to the Rules…

View on GitHub

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

References

1. Electron Docs

Thanks for reading

Reach out to me on:

• GitHub
• LinkedIn
• Portfolio (For freelance projects, reach out through the contact form)