Uncategorized

From Web to Desktop with node-webkit

So you have a HTML5 app created. Maybe its something for adding filters to photos. Or something to edit text files. It could even be a game. However, you have a problem: you want to move from the open web to the desktop and not change your codebase.

There are several different approaches you could use. PhoneGap is one. Appcelerator Titanium is another. But neither are aimed at Desktops. For that, you need some type of browser to interpret your code and to display it.

One solution you could try is node-webkit. It’s a pairing of Node.js and Chromium. It acts as UI layer in JavaScript to the Blink rendering engine with Node.js as the bridge between the two. It’s a marriage of most of functionality from Node.js with nearly all of that found in Chromium.

However, it does have its problems. One, you will have to either compile your own version or otherwise ship a binary per platform your want to support — one for Windows and another for Mac OS X, for example. And two, the overall size of your project will grow up by at least 40 MB minimum. After all, it is both Node.js and a rendering engine you are shipping  with your project too.

All that written, to get started you will need a version of node-webkit and an application manifest file.

  1. Create a “package.json” file as the application manifest.

    {
    "main": "index.html",
    "name": "nw-demo",
    "description": "demo app of node-webkit",
    "version": "0.1.0",
    "keywords": [ "demo", "node-webkit" ],
    "window": {
    "title": "node-webkit demo",
    "toolbar": false,
    "frame": true,
    "width": 800,
    "height": 600,
    "position": "center"
    }
  2. Zip together “package.json” and all of your project files into a file called “app.nw”.

    zip app.nw index.html package.json

  3. Run it with node-webkit or combine the two.

    Run with node-webkit:

    nw C:\apps\myapp

    Combine “app.nw” with “nw.exe”

    copy /b nw.exe+app.nw app.exe

  4. Ship the files along with all necessary libraries.

    For Windows, “nw.pak” and “icudt.dll” are required files. So is either “nw.exe” or the combined file. “ffmpegsumo.dll” is needed for video and audio support. So are “libEGL.dll” and “libGLESv2.dll” for WebGL GPU acceleration.

The wiki has details. Like, using Menu or Window to redress the UI and using external Node.js modules.