Category: Code : CSS & HTML

NodeJs is impressive, really really amazing. A client of mine was looking to solve a simple business process, and the only requirement was that it has to be a simple desktop application. So I thought I would try a node desktop app, using node-webkit. To demonstrate how awesome node-webkit, I’ve created a simple tutorial.

What is node-webkit?

Node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies. It’s created and developed in the Intel Open Source Technology Centre.

Getting Started

We are going to use yeoman (what is yeoman?) to generate a node-webkit project for us. This yeoman node-webkit generator is awesome, bigups to all the contributors.

Prerequisite

I’m using Ubuntu OS, so I had to install node-webkit 64bit binaries, this is just for dev purpose. When you? create a distribution/ When a distribution is created, it is packaged with relevant files.

• Linux: 32bit / 64bit
• Windows: win32
• Mac 10.7+: 32bit / 64bit

Install Yeoman (if you don’t have it installed)

$ sudo npm install -g yo

Install node-webkit generator

$ sudo npm install -g generator-node-webkit

now we can use the node-webkit generator to create out test project.

$ yo node-webkit

now following the yeoman generator instructions

1. app name: TestProject
2. project description: To demonstrate how awesome node-webkit
3. download latest: yes
4. platform to support: Linux64, Apple, Window$

Okay now that everything has configured, open up the folder with your favourite Editor or IDE. I’m using WebStorm.

Using terminal & grunt build a distribution. This will generate a distribution package for linux

TestProject$ grunt Gruntfile.js dist-linux

now run this newly created distribution package, navigate to:
(remember I’ve setup node-webkit on my ubuntu os, therefore using alias ‘nw’ to open up dist package)

TestProject$ nw dist/app.nw/

if everything was configured correctly then, you node-webkit desptop app will open up, the following:

As you can see, this is a simple HTML page that has an H1 tag with ‘TestProject’ and a p tag with ‘To demonstrate how awesome node-webkit’

So now we can create and/or style our app by changing the CSS, add images or update the HTML. You could also add twitter boostrap, or AngularJs.

For now though, we are going to keep things simple and just edit the HTML, and CSS.

To update CSS, navigate to /TestProject/app/css/main.css

body {    
            background-color: #2F3238;   
            font-size: 17px;   
            line-height: 27px;   
            font-family: 'Open Sans', sans-serif;    
            color: #F8290C; 
   }

Update the HTML, navigate to /TestProject/app/views/index.html
add to header:

< link href="../css/main.css" rel="stylesheet" />

recreate the distribution package and then open it up, now it should look like this:

Conclusion

If you’ve always wanted to create a cross platform desktop application, without using C++, Java, or Python, well now you can create a cross platform desktop application using node-webkit. Or if you want to try something new from the usual, my suggestion is give node-webkit a try, it’s really quick to get something and going. My client is currently using the node-webkit app and to Him it’s just another application which works as expected.

What cool node-webkit applications, have you come across or created?

Git Repo

URL Link: https://github.com/zulucoda/node-webkit-test-project