Create a Cross Platform Node Desktop App Using Node-Webkit

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?

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.

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: MFB Node-webkit Test Project

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:
MFB Node-webkit Test Project

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

Using WebStorm, IntelliJ Or RubyMine IDEs In Ubuntu

Jetbrains are one of the leading companies when it comes to making IDEs especially for cross platform OS. My desktop OS is Ubuntu Linux, these IDEs really shine when using them on Linux or Mac OS. One of my favourite features is that they have the terminal available within the IDEs. This great when you need execute bash scripts, or startup your server etc…

A small minor issue in Ubuntu

One problem is a random bug which causes the IDEs to loose cursor, therefore it seems like your IDEs is frozen but it’s not you still able to perform mouse clicks and select menus but you just can’t type. There’s a bug open for this issue but because it’s difficult to resolve because it occurs randomly. This may seem frustrating but there’s a simple work around for this.

Solution

Executing this script:

 $ ibus restart

I’ve created a simple bash that you may use when you have this problem. You may create a shortcut to the script.

Have you come across any other weird issues regarding and fixes to those issues for Theses IDEs? If you have please do kindly share your experience?