Saturday, 29 December 2012

Hello World Application on OS X in HTML & JavaScript with node-webkit

JavaScript is the current programming hot potato, it's already possible to build Windows 8 applications in HTML & JavaScript with the excellent tools and training that Microsoft provide but what about OS X & Linux?

Another interesting way of writing HTML & JavaScript applications for OS X (and indeed Windows & Linux) is by using node-webkit.

This tutorial steps through creating a simple hello world style application and then using node-webkit to package and run it on OS X.

Full source code can be downloaded from here.


Download node-webkit from here:

Download the latest version of jQuery from here:

Step 1- Create our Hello World web application

What we want is quite simple, a button that has a click event that updates a label.

Let's get started with some HTML, create a file called index.html and populate it with this html:

We also need to create the JavaScript that deals with the button click event.

Create another new file and save it as and populate it with this JavaScript:

Now open index.html and press the button:

Not very exciting, but it can be seen here that it's working and running in Safari. 

Step 2 - Bundle our web application as a node-webkit application

To create a node-webkit application we need to create one further file called package.json:

Now we have four files in our directory:


Create a ZIP file with the above four files and call it HelloWorld.nw.

Copy the node-webkit application into the above project directory and run it:

And there we go - our Hello World application running on OS X - source code for this demo here.

For more information on running and packaging the application see these links: