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() {
// Create the browser window size
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// and load the hello.html of the app.
win.loadFile("hello.html");
// Open the DevTools.
//you can disable this if you want
win.webContents.openDevTools();
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed.
app.on("window-all-closed", () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

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.