Node webkit Guide

A quick guide to node-webkit
2014-09-06 19:12

This is a guide for you who already have some knowlage on node.js and the Node Package manager (npm).

So as you may have seen on my work section I’ve created (together with a co-worker) a node.js based air hockey game that uses socket.io to communicate. The idea behind the game was to host it on a website and let others play the game on their computer but on our server. So we built a simple “room” system which allowed for multiple games being played at the same time.

Now the game was hosted on a web server and played via the web. About now we found out that the latency was a really big issue and this was of course even a bigger issue if you had a slower internet connection.

Now, the best solution in my opinion was if the players could “host” the server locally by them self. Then the only latency should be on their own local network. So, I found that the best option was to port the game to a Node Webkit app.

Node webkit

Node webkit is basically a way to package a website (HTML, CSS and javascript) to a package that could be distributed as a native application.

You can read more about it here: Node-webkit

For me this was perfect since node webkit also supports running node.js modules within that package and directly from the DOM. So I could start the game and run it locally on the computer. Awesome, let’s get started.

The set up

To set up a node-webkit project you need to know a little bit about node.js and how it works with a package.json file.

{
    "name": "nw-demo",
    "main": "index.html"
}

As you can see from code above we need to set the parameter “main” to a html file. This will be your landing page for that application. We can also specify some properties for the app window, such as size and toolbar options.

So the next step, while we are in our first HTML file, we could just show the user some HTML content, but since I already had a running project and wanted to embed this within the node-webkit app I choose to embed a script that would start up my “internal” node.js application.

From the app.js file which I embedded just like you would do in a normal webpage I started up a socket.io instance and a Express server so that now the users computer could act as the server setup I needed to host the game. Now the users computer would answer to the port 8888 as I defined in the Express setup.

var express = require('express');
var app = express();
var server = require('http').createServer(app);

server.listen(8888);

So basicly if the user browse to localhost:8888 the game would run just fine right there in the browser.

But that not enough for us. We need the game to start and run within our newly created node-webkit application window. So how do we get the node-webkit window to show our game without having the user to browse to the correct url and port?

Well, that’s really simple if you think of the node-webkit window as a browser. We use “window.location” of course. This should be done at the bottom of the app.js so that the last thing is to change location after the setup is completed.

window.location = 'http://localhost:8888';

And that’s basically it!

Now to start your application you simply run

open -n -a node-webkit path/to/application

Distribution and packaging

But wait, we still haven’t packaged the application yet? You can’t you expect your average user to figure out how to start your application with that code.

So we need to create a package that we can distribute to our users. For this we are going to use Grunt node-webkit builder:

Grunt node-webkit builder

From here things are pretty straightforward, all we need to do is to put all our files in a directory called source and then create two new files in the root (above the source directory). The first one is a new package.json file:

{
    "name": "Application packager",
    "version": "0.0.2",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-node-webkit-builder": "~0.1.21"
    }
}

And then a GruntFile.js

Then you just need to follow the guidelines on the Grunt node-webkit builder link above.

And there you have it. A quick guide on how to port your current node.js app to a node-webkit app for a simpler distribution. I hope you found this guide helpful.


Recent blog posts


The Travel (Working title)

So as I wrote in the previous blog post, I’m working on a game. The working title for the game is now set to “The Travel” and why that is I’ll keep as a secret for now....

Read more


Defold - A game engine

Most of you probably never heard of a game engine called Defold. It’s a 2d game engine developed by King, which is made so that you...

Read more