Have you ever wondered what it would be like to package up node modules and run them in a windowed desktop environment using
HTML and Javascript?
Well, nows your chance!
Node Webkit
Node-Webkit is by far one of the coolest runtime environments ever synthesized by man. Ever. It's currently in 0.8.0-rc1
and is actively being developed by Roger Wang. Let's take a closer look at some of the concepts
that were introduced by this framework.
Here is a presentation to get you up to speed if you have not heard of it yet.
Node as a Desktop Runtime Environment
Node webkit takes the Chrome-web-browser and fuses it to the node runtime environment. (Actually the module, require, and global variables are hoisted into a chrome window, but that's too technical. Let's just get started already!)
Getting Started
If you haven't downloaded node.js yet, you may want to download Version v0.10.17. Follow node's instructions on installing it. Or if you are running linux, have git, and make installed...
git clone https://github.com/joyent/node.git
cd node
./configure
sudo make
sudo make install
After that, install grunt. Open a command terminal and type:
npm install -g grunt-cli
Grunt will help streamline your publishing process. Feel free to check out this tutorial on grunt if you are worried about using grunt. Also, make sure to put sudo before the install command if you are running linux.
Next, create a project folder and open a terminal instance to it.
npm init
(package.json)
{ //follow the instructions on creating the file and edit it yourself afterwards
"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",
"icon": "link.png",
"toolbar": true,
"frame": false,
"width": 800,
"height": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"devDependencies":{
"grunt-node-webkit-builder":"~0.1.11"
//Feel free to add coffeescript and your favorite libraries here
},
"js-flags": "--harmony_proxies --harmony_collections",
"webkit": {
"plugin": true
}
}
It will spit out a package.json file for you. This package configures your node-webkit application.
From that folder run...
npm install...create an index.html file...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello Node-Webkit!</h1>
</body>
</html>
...and a gruntfile... (gruntfile.js)
module.exports=function(grunt){
grunt.initConfig({
nodewebkit: {
options: {
build_dir: './webkitbuilds', // Where the build version of my node-webkit app is saved
mac: true, // We want to build it for mac
win: true, // We want to build it for win
linux32: false, // We don't need linux32
linux64: false // We don't need linux64
},
src: ['./*','./js/*','./css/*'] // Your node-wekit app
}
});
grunt.loadNpmTasks('grunt-node-webkit-builder');
grunt.registerTask('default',['nodewebkit']);
}... and finally run grunt.
gruntWhew! That was a lot.
While everything finishes up, (and downloads all the binaries needed to make this happen) we will discuss what you have just created. Essentially, nodewebkit packages up all of your source files into a virtual directory/zip file and delivers them like normal html pages from a web server... (oops, I mean your desktop.)
Once everything is built, look in the \webkitbuilds\releases\{appname} - {timestamp}\win\{appname} folder to find your exe waiting.
Feel free to use require('node-module') right in the window. In fact, node-webkit has it's own native UI library, and the Window object is an instance of node's EventEmitter object. Which means you can listen to native window events by using Window.on().
Conclusion: Get developing already!
In functional health, Josh
No comments:
Post a Comment