NodeJs is amazing, really really amazing. A client of mine was looking to solve a simple business process, he’s 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?
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.
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.
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
- app name: TestProject
- project description: To demonstrate how awesome node-webkit
- download latest: yes
- 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
font-family: 'Open Sans', sans-serif;
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:
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?
URL Link: https://github.com/zulucoda/node-webkit-test-project