Turn your Website into a Cross-Platform Desktop App with 11 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 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.

Lo Behold! Your app has been converted into a desktop app in just 11 lines of code (excluding empty lines). 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

Yeah I did compress the file a bit to fit it in 11 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)

Project using Electron

GitHub - ruppysuppy/SmartsApp: 💬📱 An End to End Encrypted Cross Platform messenger app.

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

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Originally published at https://dev.to on April 4, 2021.