Explorations of using node-webkit + ExtJS4 to build a desktop application

Since the demise of Sencha Desktop Packager and the non-arrival of any examples or clues about how TideKit might actually work I decided to have a look at node-webkit and see whether or not it would work as a desktop packager for ExtJS4. What I say below might work with ExtJS5 but I havent upgraded yet since it is still quite new.

Node-webkit is an executable (one each for Win, OSX, Linux). It is a chromium webkit browser wrapped by a “shell” that adds JavaScript libraries so that you can access the local file system, memory, native windows and menus, system tray, etc etc of the computer it is running on. Hence, it creates the opportunity to turn HTML5/JS/CSS into a desktop application. The extra JavaScript is provided by NodeJS (well the V8 JS engine actually, but via NodeJS libraries). Hence the name “node-webkit”.

The first observation is that there was a lack of any “Using node-webkit with ExtJS4” information. Lots of little bits and clues but no overall approach. So, I thought I would share my exploration to make the trail easier for the next person.

The second observation is that you can make a desktop app with just node-webkit. However, unless you want to re-invent the wheel in terms of making Http requests or direct remoting (for example) you will also need to install NodeJS separately so you can use the NPM packager to easily download the various NodeJS libraries that you might want to use. There are nearly 90,000 of them!

And, of course, you will need to be familiar with ExtJS4 and Sencha Cmd. I wont be explaining any of that.

Useful resources

These are the things that helped me get my head around the concept:

https://www.youtube.com/watch?v=lNpjx4BJlH4 – A series of 6 videos for beginners. Very helpful.

https://www.youtube.com/watch?v=XmHh4RrlpIk – An introduction by Roger Wang, the guy that made node-webkit.

http://code.tutsplus.com/tutorials/introduction-to-html5-desktop-apps-with-node-webkit–net-36296

http://www.amazon.com.au/Windows-Desktop-App-Creation-node-webkit-ebook/dp/B00EEYFFVC/ – a short, inexpensive eBook that covers the main aspects clearly. Great for beginners. Even though the book is for Windows users, OSX and Linux users will also find the info useful.

(I will add more resources as I find them).

Installation

Installing node-webkit went without a hitch. Just download the installer for your OS from the GitHub page and follow the dots.

First tests

I then used the above mentioned resources to make my first desktop app. I followed the tuts introductory tutorial. That all worked without a hitch. Very excited by now.

With ExtJS4:
To test the ExtJS compatability I created a new ExtJS app using Sencha Cmd generate, built the default production app, then ran it in node-webkit and ….. it worked! More excitement.

Some learnings here:

1. To test your app you basically pass the folder containing your app (ie the folder with the main html file in it) to nw.exe. You *can* drag and drop it but I found the fasted way was to create a batch file (I am using Win7) in the same folder as the app and then run that. The batch file contents (for my machine) looks like:
..\..\node-webkit-v0.10.2-win-ia32\nw ./
which basically says (go back up to the folder containing the nw.exe and run it with the current folder as the parameter. You could also add the node-webkit folder to your PATH (on windows) to avoid needing the path in the batch file.
Edit: And/or of course maybe rename the folder to (say) NW so the folder or path doesnt need updating when you update your version of node-webkt!

Executing nw opens the window and displays your app (as you would have seen in the video series above.

2. Note that my initial testing built the ExtJS app first then passed that to NW. Also at this stage there is no NodeJS library being used, It is just my ExtJS app. It gets a bit more complicated when you want to pass the unbuilt version (so you can debug your app via the NW chrome debugger). More on that below – I am still exploring all that.

NodeJS

Now, installing NodeJS so I can require the appropriate extra libraries. This wasn’t as simple initially. The default installation folder is C:\Program files\nodejs. That seems fair enough. However, even though I am logged in as Adminstrator on my computer file permission problems meant that I couldn’t run npm (the package installer). See this post for details of errors. My solution was to uninstall NodeJS and reinstall in C:\nodejs. That worked perfectly and I could run npm without errors.

Using NodeJS packages (modules)

To use the downloaded NodeJS packages you need to install them in the node_modules folder at the root of your app. It must be called node_modules. So, one way to install a module is to run npm install {package name} from a command line in the root of your app’s folder. The node_modules folder will be created if necessary and the module will be saved in that folder. For me I just ran  C:\nodejs\npm install httpreq from a terminal / command line (to load the httpreq module, for example).

More tests: Adding Node to ExtJS4

This is preliminary. Starting with the default ExtJS app generated by Sencha Cmd I added the following:
1. The require() statements which I placed above Ext.define(‘App.view.Main’, {:

var gui = require('nw.gui');
var httpreq = require('httpreq');

2. a toolbar to the centre Tab panel with some test buttons

{
        region: 'center',
        xtype: 'tabpanel',
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'button',
                text: 'Open file',
                handler: function(btn, e) {
                    // Test opening a Word Doc
                    console.log('Pressed open file');
                    gui.Shell.openItem('Test1.doc');
                }
            }, {
                xtype: 'button',
                text: 'Http request',
                handler: function(btn, e) {
                    // Test making a http request
                    // Using https://www.npmjs.org/package/httpreq
                    var url = "http://www.google.com";
                    console.log(url);
                    httpreq.get(url, function(err, res) {
                        if (err) return console.log(err);
                        console.log(res);
                    });
                }
            }]
        }],
        items: [

            {
                title: 'Center Tab 1',
                html: 'Hello first app'
            }
        ]
    }

I then built the production app and loaded it into NW as described above and yes! it works!

Next steps

My next task is to work out the best way to integrate ExtJS4 and node-webkit so that it is possible to run the uncompressed version of my app in NW so I can debug it using the chrome developer tools in NW. I will report back when I have done that!

Edit: Done. See Part 1