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.
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 Searchspan>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.
Hope you might have find this tutorial helpful to develop desktop applications.
Thanks 🙂