Turn your website into a Cross-Platform Desktop App with less than 15 lines of code
Tags: webdev, javascript, electron, crossplatform
Published: 2021-04-04 04:49:53

# 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.

```bash
npm i -g electron
```

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

```javascript
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

```bash
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

```html
<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

```bash
npm init
```

and add `electron` as a **Dev Dependency**

```bash
npm i -D electron
```

Lets create the `index.js` file

```javascript
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](https://smartsapp-ba40f.firebaseapp.com/)

{% github https://github.com/ruppysuppy/SmartsApp %}

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# References

1. [Electron Docs](electronjs.org/docs)

# Thanks for reading

Reach out to me on:

-   [GitHub](https://github.com/ruppysuppy)
-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose-429a601a0)
-   [Portfolio](https://tapajyoti-bose.web.app) (For freelance projects, reach out through the contact form)