Develop Cross-Platform Apps Using Electron

It is not always necessary to develop a desktop application, you need to build it using traditional languages like c++, vb .net, python and so on but now you can do the same thing without them. Today I will show you very easy way to do it.

Before getting started let’s see what is an electron?, Electron is an open-source framework developed and maintained by GitHub. Electron allows for the development of desktop GUI applications using web technologies: It combines the Chromium rendering engine and the Node.js runtime.

source — https://www.electronjs.org/

In this article, we will develop a simple hello world application using Electron.

First, Install Node on your system, select the LTS version to download.

Now create a folder on desktop or anywhere you want and give the app name as a folder name. Now open that folder and create a hello.html file with hello world in it.

Open the terminal window within your folder and type the following commands to install an electron for your application.

“npm init -y” = y for skipping required information, you can change it later in package.json file.

“npm install electron — —save-dev” = this will install an electron for your application as a project dependency. you can add — — verbose option to get download stats of electron.

Now create main.js file which should create windows and handle all the system events your application might encounter. A more complete version of the above example might open developer tools, handle the window being closed, or re-create windows if the user clicks on the app’s icon in the dock.

Enter the following code in your main.js file

const { app, BrowserWindow } = require("electron");function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});win.loadFile("hello.html");//you can disable this if you wantwin.webContents.openDevTools();}app.whenReady().then(createWindow);app.on("window-all-closed", () => { (process.platform !== "darwin") {app.quit();}});app.on("activate", () => { (BrowserWindow.getAllWindows().length === 0) {createWindow();}});

Open file package.json and enter the following code in it.

{"name": "Your App Name", "version": "1.0.0","description": "Your app description","main": "main.js","scripts": {"start": "electron ."},"author": "Your Name","license": "MIT","dependencies": {"electron": "^8.2.0"}}

Now Everything is done, just open your terminal within folder and type “npm start” your application will be launch.

It will look like this.

My upcoming article is all about creating msi installer/setup for your electron-based application on windows.

Backend Developer, Gamer, Student.