DEV Community

Cover image for Turn your website into a Cross-Platform Desktop App with less than 15 lines of code
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

Turn your website into a Cross-Platform Desktop App with less than 15 lines of code

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



electron .


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

and add electron as a Dev Dependency



npm i -D electron


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

GitHub logo 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…

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:

Top comments (20)

Collapse
 
thanhlm profile image
Thanh Minh

Personally, I don't like electron that much. But for make a cross-desktop app in low bucket, electron is the best

Collapse
 
ruppysuppy profile image
Tapajyoti Bose • Edited

Same here. I am eagerly waiting for tauri to become production ready

Collapse
 
abhinav1217 profile image
Abhinav Kulshreshtha

I have actually started using it, Even though it is not marked as production ready, My app is quite stable. Most of the api's are now stable. Only issue I have faced is lack of Video Tutorials ( because I am a visual learner ) but their docs are mostly updated regularly.

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose

The more I hear about it, the more excited I get. Its a huge improvement over electron. I am waiting mainly for 2 features: Frameless window & Multiwindow Mode because I generally use these extensively.

Collapse
 
thanhlm profile image
Thanh Minh

Oh nice, I haven't heard it before, look promise.
In fact, when building refiapp.vercel.app/ with electron doesn't make me happy with it

Thread Thread
 
patarapolw profile image
Pacharapol Withayasakpunt

I believe Tauri is a fork of Golang's webview/webview.

I wrote about alternatives to WebView long time ago.

Currently, I bank on Lorca / Chrome DevTools Protocol, and I regretted it a little...

Thread Thread
 
thanhlm profile image
Thanh Minh

Thanks @patarapolw I did some research on other solution but I think it still missed some API that electron can provide. For eg: Context menu

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose

Yeah its an interesting project, but its still in development

Collapse
 
lyrod profile image
Lyrod

Do not install electron globally please

Collapse
 
ruppysuppy profile image
Tapajyoti Bose • Edited

Yeah, I did mention that later on (to use it in a project)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Please don't. There are enough bloated, slow electron based apps around already

Collapse
 
khangnd profile image
Khang

It would be helpful to name a few, for reference and bad practices to avoid.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

TBH - the whole idea of Electron is flawed - you are essentially shipping almost an entire web browser with every single app. You end up with a whole bunch of web browsers all running at once, hogging memory and resources. This would be fine if all the apps were sharing an instance of a central webpage renderer - but AFAIK, they aren't.

The overall result is a bunch of massively bloated, resource hungry apps that, in reality could be way, way, way more efficient. Not to mention the fact that they'll all likely be running different versions of the web renderer, with all the associated security and update issues that that brings.

This is quite typical of the way a lot of development is done today - little or no consideration being given to whether or not the tools are appropriate to what is being built (using React for ridiculously simple portfolio sites etc.) - people just want to use whatever they know, or is the current 'cool' thing.

The priority always seems to be making it 'easier' for the developer with no regard to efficiency, resource use etc.

Thread Thread
 
khangnd profile image
Khang

Thank you, this is absolutely the insights that I would love to see.

Collapse
 
pcjmfranken profile image
Peter Franken

The author has already included a convenient list of some of the most bloated and worst performing ones right in in the article:

Some of the biggest desktop apps are made using electron like VS Code, Facebook Messenger, Twitch, Microsoft Teams.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

From the apps listed in the blog (as @pcjmfranken pointed out) you can see quite a few big names. Even though electron does come with a couple of cons its still the de facto standard till now.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

What??? You can do that in literally zero line of code, in Neutralino.js.

Collapse
 
l0uiscouture profile image
Louis Couture β€οΈπŸ³οΈβ€πŸŒˆπŸ‡ΊπŸ‡³βšœοΈ

Don’t use this. Electron is garbage and a waste of space. Use a PWA instead and/or react native. It’s literally like having multiple versions of chromes at the same time, totally useless.

Collapse
 
linshiyan1992 profile image
shiyan lim • Edited

15 lines of code===80 mega bytes binary.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Yeah, the sad reality 😒