A desktop web-app with node-webkit

Why ?

A few days ago, Intel released a cross platform development kit (XDK) for HTML5 developement.

During the installation, I realised it was made using node-webkit.

node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and Javascript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies. — from node-webkit github page

Let's give node-webkit a try !

Check/clone/fork/update the code repository.

Update: created release v0.1.0 for windows & linux.

Workflow

You need nodejs and gruntjs.

I use the following technologies for my demo app:

• Jade for templates
• Stylus for styles

Run npm install to retrieve npm dependencies.

Build with grunt.

Grunt executes the following tasks:

• copy elements from app/assets to dist
• stylus to compile the css from app/css/ to dist/my-app.css
• cssmin to minify the css from dist/my-app.css to dist/my-app.min.css
• jade to compile the templates from app/index.jade to dist/index.html
• jshint to validate javascript code
• concat to join javascript files from app/js to dist/my-app.js
• uglisfy to minify the javascript from dist/my-app.js to dist/my-app.min.js
• node-webkit-builder to create our application package.

node-webkit-builder will download a node-webkit package for the defined target platforms (see Gruntfile.js for details).

The final app will be built as an executable in the folder dist-pkg/releases/my-app/<platform-name>/my-app/ .

The app

A node-webkit app is basically a zip file containing the web app.

It is described using a package.json file (like everything based on nodeJS).

{
    "name": "my-app",
    "version": "0.1.0",
    "main": "index.html",
    "window": {
        "toolbar": false,
        "width": 800,
        "height": 600
    }
}

The next example is an extract from Intel XDK package.json file, which shows more options:

{
  "name": "XDK",
  "main": "public/index-node-webkit.html",
  "window": {
    "width": 1280,
    "height": 768,
    "min_width": 960,
    "min_height": 500,
    "icon": "public/images/xdk_icon.png",
    "toolbar": false
  },
  "engine": "node >= 0.10.0",
  "dependencies": {
    "underscore": "~1.4.4",
    "backbone": "~1.0.0",
    "less": "https://github.com/cperkinsintel/less.js/tarball/master"
  },
  "devDependencies": {
    "jsdoc": "3.2.1"
  },
  "scripts": {
    "prestart": "node scripts/make-public.js --mode=cloud",
    "start": "node aws-launcher",
    "test": "node scripts/run-tests.js",
    "jshint": "node scripts/run-jshint.js",
    "start-nw": "node scripts/make-public.js && nw .",
    "start-node-webkit": "node scripts/make-public.js && node-webkit ."
  },
  "chromium-args": "--disable-threaded-animation --enable-threaded-compositing",
  "node-remote": "localhost"
}

You can specify a minimum size for the window, its icon, the node version and the project dependencies, scripts to run on events (prestart...), options for the chromium engine and the hostname for serving remote files to node...

To run the app, just run node-webkit with the path to your app as an argument nw my-app.nw.

The node-webkit-builder grunt task creates a package (a nice 52mb application \o/) which is directly executable.

Demo time !

Download the release file if you don't want to build it yourself

The demo app shows some stuff:

• A "pages" demo, to show that navigation between pages works
• A "node" demo, using a node module (fs) to list the content of the current directory.
• More to come !

Conclusion

This is a pretty cool way of creating desktop web apps.

Packaged apps are quite big, but can be efficiently compressed (my 52mb app can be packed in a 22mb zip file).

Next steps:

• play with node-webkit's package.json options
• addind a database
• toolbar