Before we start building an electron app, we should know what is Electron JS and Why should you use it ?

WHAT IS ELECTRON JS:

Electron formerly known as Atom, is an open-source javascript framework to build cross platform desktop application using HTML,CSS and Javascript. Electron JS is developed and maintained by GitHub. To brief, it triggers the main process (main.js or index.js) which creates desktop application window that has capability to interact with native GUI of operating system. Electron accomplishes this using Chromium and NodeJS as runtime environment. The output Electron app can be packaged for various platforms windows, Mac and Linux.

WHY ELECTRON JS:

Suppose you have developed a Web application and tomorrow business requires it to be delivered as desktop application and that too, should be compatible with different operating systems. What would be your response ? Would you be developing another desktop application ? No, you dont have to. What if there is a framework available based upon your current skills which is able to fullfill business requirement. Yes, Electron JS is capable of projecting external web application in desktop window that can be packaged for various platforms. This is not all but this is what i came across recently.

HOW TO BUILD AN APP:

In this article, I would like to discuss about creating electron application from scratch using node and typescript. I will be creating simple electron window and projecting some external content into it.

Let us start by creating a new project and generating package.json file using npm init and install electron using console terminal npm install electron --save. and you may wish to update package.json with

"main": "dist/index.js",
"scripts": {
"start": "tsc && electron ."
},
It is time to add index.ts file in your project and add the following code snippet in it.
import {BrowserWindow, app}  from 'electron';
var mainWindow = null; 
app.on('ready', function() { 
  mainWindow = new BrowserWindow({width: 800, height: 600}); 
  mainWindow.loadURL('http://www.steadyreaders.com'); 
  mainWindow.on('closed', function() { 
    mainWindow = null; 
                            }); 
});
app.on('window-all-closed', function() 
{ 
    app.quit(); 
}); 
 
Yeah, time to kick start our application. Open terminal and hit npm start. I am able to see a new electron window in task bar.

Please note url provided is opened in electron desktop window with some basic user interface.
In our Next Article, we will be implementing some good to have features in our basic app.