Getting Started with node webkit - Hosting-Site/node-webkit GitHub Wiki

This chapter contains some tutorial information to get you started with node-webkit programming. It assumes that you have node-webkit binaries. (Such binaries are available in the “Downloads” section of our README. If you want to build your own node-webkit binaries, refer to the Building node-webkit section instead.)

Node-webkit is based on Chromium and Node.js. It lets you to call node.js code and modules directly from the DOM, and allows you to use Web technologies for your apps. Further, you can easily package a web application to a native application.

Basics

To begin our introduction to node-webkit, we'll start with the simplest program possible.

Example 1. Hello World

Capture3

Create index.html:

<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Create package.json:

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

Compress index.html and package.json into a zip archive, and rename it to app.nw:

app.nw
|-- package.json
`-- index.html

Download the prebuilt binary for your platform and use it to open the app.nw file:

$ ./nw app.nw

Note: on Windows, you can drag the app.nw to nw.exe to open it.

Example 2. Native UI API

Capture4

There are APIs for native UI controls in node-webkit. You can use these for controlling window, menu, etc.

The following example shows how to use menu.

<html>
<head>
  <title> Menu </title>
</head>
<body>
<script>
// Load native UI library
var gui = require('nw.gui');

// Create an empty menu
var menu = new gui.Menu();

// Add some items with label
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));

// Remove one item
menu.removeAt(1);

// Iterate menu's items
for (var i = 0; i < menu.items.length; ++i) {
  console.log(menu.items[i]);
}

// Add a item and bind a callback to item
menu.append(new gui.MenuItem({
label: 'Click Me',
click: function() {
  // Create element in html body
  var element = document.createElement('div');
  element.appendChild(document.createTextNode('Clicked OK'));
  document.body.appendChild(element);
}
}));

// Popup as context menu
document.body.addEventListener('contextmenu', function(ev) { 
  ev.preventDefault();
  // Popup at place you click
  menu.popup(ev.x, ev.y);
  return false;
}, false);

// Get the current window
var win = gui.Window.get();

// Create a menubar for window menu
var menubar = new gui.Menu({ type: 'menubar' });

// Create a menuitem
var sub1 = new gui.Menu();


sub1.append(new gui.MenuItem({
label: 'Test1',
click: function() {
  var element = document.createElement('div');
  element.appendChild(document.createTextNode('Test 1'));
  document.body.appendChild(element);
}
}));

// You can have submenu!
menubar.append(new gui.MenuItem({ label: 'Sub1', submenu: sub1}));

//assign the menubar to window menu
win.menu = menubar;

// add a click event to an existing menuItem
menu.items[0].click = function() { 
    console.log("CLICK"); 
};

</script>  
</body>
</html>

Example 3. Using node.js

You can call node.js and modules directly from the DOM. So it enable endless possibilities for writing apps with node-webkit.

<html>
<body>
<script>
// get the system platform using node.js
var os = require('os')
document.write('Our computer is: ', os.platform())
</script>
</body>
</html>

Run and Package Apps

Now, we can write simple node-webkit apps. Next is to learn how to run and package them.

Run the App

There are two general ways to run apps for all platform.

From a folder. The startup path specifies this folder.
From a .nw file (a renamed .zip-file). The startup path specifies the file.

For Example:

nw path_to_app_dir
nw path_to_app.nw

Troubleshooting

Please read Troubleshooting if there are any problems.

Go back to Wiki for much more.