Build desktop application using nodeJs and electron

If you are planning to create any desktop application using HTML, JS, CSS then this tutorial is very helpful for you. All you required is little knowledge about NodeJs, And In nodeJs there is a module called electron, By this You can develop a desktop application for your Linux, Windows, Mac OS. And this desktop application will become develop on native languages so it will be full responsive.The popular Atom editor is also developed on electron framework.

In my last tutorial I have shown how to add google custom site search engine on your website. So here i am going to develop a custom site search desktop application. which will let me search from my website content.
Ok lets start the tutorial.

Create your package.json file under your project directory.


  "name": "node-desktop-app",
  "version": "0.0.1",
  "description": "Simple nodejs desktop app",
  "dependencies": {
    "electron-prebuilt": "^0.36.2"
  "scripts": {
    "start": "electron app.js"

Where the above code you will see new line inside script “start”: “electron app.js”. It means app.js is your main file which will be execute when you’ll run your built command.

After that run npm install to install all the required dependencies.

Create your main app.js file and write down to setup your desktop environment and events like screen default size, On App start and On close event.


var app = require('app');
var electron = require('electron');
var BW = require('browser-window');
var mainScreen = null;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
app.on('ready', function() {
  mainScreen = new BW({width: 800, height: 600});
  mainScreen.loadURL('file://' + __dirname + '/gsearch.html');
  mainScreen.on('closed', function() {
    mainScreen = null;

Where mainScreen.loadURL(‘file://’ + __dirname + ‘/gsearch.html’); is the path where your HTML,CSS and javascript based file will be..


<!DOCTYPE html>
<title>Google Custom Site Search Engine (</title>
<div style="width:80%; margin:0 auto;">
<h1 style="text-align:center;">My Public Notebook <span style="font-size:14px;">Custom Search</span></h1>
  (function() {
    var cx = '002214219071427465993:ui-clapbbvu';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);

Now goto your project directory using terminal and run below command.

npm start


Hope you might have find this tutorial helpful to develop desktop applications.

Thanks 🙂

If you like this post please don’t forget to subscribe my public notebook for more useful stuff