Develop desktop app using html, css and javascript

Posted By : Md Imroz Alam | 27-Sep-2017

We can develop a desktop app using HTML CSS javascript. An electron is an npm module of the node to develop an app for multiple platforms ( Mac, Windows, and Linux).

1) we need to setup electron globally to our system

               npm install electron -g

Electron provides an in-built feature of node server and chromium browser.

2) In this demo app, we are using directory structure as following:-

a) main.js :- it contain electron app startup code.

b) index.html:- it contain javascript, HTML and CSS code.

3) main.js content

               function createWindow() {

    var electron=require("electron");
    var url = require('url');
    var path = require('path');

    var {
        app,
        BrowserWindow
    } = electron;
    var getUrl = url;
    var getPath = path;

    function initWindow() {


        win = new BrowserWindow({
            width: 800,
            height: 600            
        })
win.loadURL(url.format({
   pathname: getPath.join(__dirname, 'index.html'),
   protocol: 'file:',
   slashes: true
}));
        win.on('closed', () => {
            win = null
        })
    }

    function quitApp() {
        if (process.platform !== 'darwin') {
            app.quit();
        }
    }

    function activateWindow() {
        if (win === null) {
            createWindow()
        }
    }
    app.on('ready', initWindow);
    app.on('window-all-closed', quitApp);
    app.on('activate', activateWindow);
}

var initApp = function() {
    createWindow();
}

electron app has a multiple events like ready, window-all-closed, activate and extra . to handle your app on the basis of an event.

4) index.html content

Desktop app