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.
desktop-app
Ok lets start the tutorial.

Create your package.json file under your project directory.

package.json

{
  "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.

app.js

/*
* Author: Rohit Kumar
* Website: iamrohit.in
* Version: 0.0.1
* Date: 07-01-2016
* App Name: Google Custom Site Search Engine (www.iamrohit.in)
* Description: Build desktop application using node js and electron
*/
 
var app = require('app');
var electron = require('electron');
var BW = require('browser-window');
 
 
var mainScreen = null;
 
// Action when all window close
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});
 
app.on('ready', function() {
  // Create the browser window.
  mainScreen = new BW({width: 800, height: 600});
 
  // Load the program from HTML file.
  mainScreen.loadURL('file://' + __dirname + '/gsearch.html');
 
  // Perform action when window close.
  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..

gsearch.html

<!DOCTYPE html>
<html>
<head>
<title>Google Custom Site Search Engine (www.iamrohit.in)</title>
</head>
<body>
<br/>
<br/>
<div style="width:80%; margin:0 auto;">
<h1 style="text-align:center;">My Public Notebook <span style="font-size:14px;">Custom Search</span></h1>
<script>
  (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:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
<gcse:searchresults></gcse:searchresults>
</div>
</body>
</html>

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

npm start

DOWNLOAD SOURCE CODE

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