In recent years, desktop apps have regained ‘some’ territory. There are new apps with rich interfaces such

In recent years, desktop apps have regained ‘some’ territory. There are new apps with rich interfaces such as Slack, Popcorn Time, desktop Whatsapp (unofficial), the Atom IDE and many others. And what is every more interesting is what’s behind them: Node.js, Javascript, HTML and CSS!

With the vast amount of technologies and excellent quality libraries that exist for web applications in javascript, such as Angular, Material Design, Backbone, Ionic, Reach and several others, using these to create desktop apps becomes a very interesting alternative.

The final quality of the app can be very good and native, and the applications themselves have access to the entire operating system and use the same stack. Yes, we use the same stack! Which is not a minor detail in terms of team productivity.

There are several ways to use JavaScript in desktop apps, the most interesting one being Chromium. One recent, fascinating case was Electron, which is used in Atom and is maintained by the Github guys. But in this case, we’ll use NW.js (previously known as Node Webkit) to illustrate.

Using Node.js, it’s possible to write any type of application with all its features. But in this case, we will go over a very common occurrence: encapsulating an existing Web application. This time, we will not review basic operations which can be done with NW.js; these can be easily found in several tutorials and the main github page. First, download an executable bundle for each platform and package your application with a manifest (package.json). To automate these steps, use a glulp plug-in.

First, we create an empty project file:

We then define our units build on the package.json. We can run it with the builder and gulp:

{
  "name": "example",
  "devDependencies": {
    "gulp": "^3.x",
    "node-webkit-builder": "^1.x"
    "gulp-util": "^2.2.14"
  }
}

The gulpfile is quite simple, refer to the documentation of node-webkit-builder for more configuration details.

var NwBuilder = require('node-webkit-builder');
var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('nw', function () {

    var nw = new NwBuilder({
        version: '0.11.0',
        appName: 'HexactaJs',
        files: ['./src/**'],
        platforms: ['win32', 'osx64']
    });

    nw.on('log', function (msg) {
        gutil.log('node-webkit-builder', msg);
    });

    return nw.build().catch(function (err) {
        gutil.log('node-webkit-builder', err);
    });
});

gulp.task('default', ['nw']);

It is important that we insert the files that will be packaged within src. The only requirement that NW.js needs is the presence of the package.json file (another one, this one in /src). For more details, visit this link. This time, we will keep it simple by indicating the main file (index.html), and configuring the native window in which your application will run.

{
    "main": "index.html",
    "name": "hexacta-js-desktop",
    "description": "Hexacta demo app",
    "version": "0.9.9",
    "window": {
        "title": "Hexacta demo",
        "toolbar": false,
        "frame": false,
        "width": 800,
        "height": 500,
        "position": "center"
    }
}

Index.html is a very simple Angular application we will use to prove that any application will run. The ‘stats’ class element will be completed by node.js!

<div>

Whats your name?

Name: <input type="text" />

Hello {{name}}

Computer information: (I have access to you SO)
<div class="stats"></div>
</div>

Finally, with our js, we may require core node modules, or we may add, and in this case we also have access to jQuery, since we loaded it in index.html. At this time, we will ignore a large portion of the NW.js (the ability to add native menus, icons in the tray or notifications). A basic menu is provided in the sample code.

var os = require('os'); //node.js
var prettyBytes = require('pretty-bytes');

$('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>');
$('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>');

Finally, we install everything:

$ npm install -g gulp
$ cd [project]
$ npm install
$ gulp

By running the gulp command, the node-webkit-builder will download the executable file, it will package each selected platform (win32 and osx64 in our case) and our folder / src. We can find our apps in / build!