Create a Desktop App With JavaScript & Electron

In this lesson i want to show Create a Desktop App With JavaScript & Electron, ElectronJS is a framework that allows developers to build cross platform desktop applications using web technologies such as JavaScript, HTML and CSS. it is built on top of Chromium, the open source version of Google Chrome and Node.js, which provides runtime environment for JavaScript.

with ElectronJS developers can use the same codebase to create applications for Windows, Mac and Linux. this eliminates the need to write separate code for different platforms and it makes the development faster and more efficient.

One of the main benefits of ElectronJS is that it allows developers to leverage their existing web development skills to create desktop applications. Developers can use popular web frameworks such as React, Angular or Vue.js to build the user interface and Node.js to handle the backend logic.

The structure of an ElectronJS application is composed of two main parts: main process, which runs on the desktop and manages the application’s lifecycle, and renderer process, which runs in a web page and handles the user interface. main process and the renderer process communicate with each other through inter process communication (IPC) mechanisms.

ElectronJS also provides set of builtin modules, such as the electron and remote modules, which allow developers to access native functionality of the operating system and perform tasks such as creating windows, accessing the file system or displaying notifications.

ElectronJS is widely used by many popular applications such as Visual Studio Code, Slack and Discord. it is also good for creating desktop applications that require offline capabilities, native system integration or access to hardware devices.

This is basic example of how to create a desktop app with JavaScript and Electron:

First, you will need to install Electron by running the following command in your terminal: npm install electron
After Navigate to an Empty Directory to setup the project and run the following command npm init, this command generate the package.json file.
In this directory create new file called main.js and another called index.html.

In your main.js file, you will need to set up your Electron app by importing electron module and creating new BrowserWindow object. Your code should look something like this:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

const electron = require('electron');

const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {

mainWindow = new BrowserWindow({width: 800, height: 600});

mainWindow.loadURL(`file://${__dirname}/index.html`);

mainWindow.on('closed', function() {

mainWindow = null;

});

}

app.on('ready', createWindow);

In your index.html file you can set up the UI for your app using HTML and CSS. This is where you will add any buttons, text fields or other elements that you want to include in your app.
To run your app, you can use the command electron . in your terminal. this will launch your app in new window.
You can also build and package your app for distribution on different platforms, such as Windows, Mac or Linux.

This is just basic example and you can add more functionality and features to your app as you continue to develop it.

<!DOCTYPE html>
<html>
    <head>
        <title>My Electron App</title>
    </head>
    <body>
        <h1>Welcome to my Electron app - GeeksCoders.com</h1>
    </body>
</html>