Setting up Sencha Touch 2 App with Node.JS and Express.JS

Update

Part 2 of this article – Wiring up Ext.Direct to Sencha Touch 2 with Node.JS and Express.JS is available

I wanted to setup a development environment to try out the new Sencha Touch 2.2.1 library along with a node.js/express.js backend for handling data requests.

I started out by downloading the latest Sencha Cmd. If you already have Cmd installed you can check out your version with this command:

[whit@:~] $ sencha
Sencha Cmd v3.1.2.342
...

Upgrading to the latest version (I don’t need to obviously) with this command:

[whit@:~] $ sencha upgrade
Sencha Cmd v3.1.2.342
[INF] Determining the latest version of Sencha Cmd
[INF] The latest version of Sencha Cmd is 3.1.2.342
[INF] Sencha Cmd 3.1.2.342 is this version.

I also installed the Sencha Touch 2.2.1 GPL library from the Sencha website and installed it into my usual location for frameworks which is located at ~/src

The first thing I did was build out a new Express application with this command:


[whit@:~/node] $ express --sessions --ejs sencha_touch_direct

This builds out the basic structure of my express application.

Next, I used sencha cmd to build out a new workspace, which I’m simply calling touch_workspace. Workspaces are new in Sencha CMD and support having large multiple page applications. For more info, here are the docs for workspaces


[whit@:~/node/sencha_touch_direct] $
sencha -s ~/src/touch-2.2.1/ generate workspace ./public/touch_workspace

You can see I’m putting the workspace directly into the public folder of the Express application.

Finally, I construct the application skeleton itself with this command, putting it directly into the new workspace I just created.

[whit@:~/node/sencha_touch_direct] $
sencha -s ~/src/touch-2.2.1/ generate app TouchApp ./public/touch_workspace/touchApp

Now a quick test of everything by running node app.js from the terminal, opening a browser to localhost:3000/touch_workspace/touchApp/index.html and viola!

Conclusion

Its pretty easy to setup a Sencha Touch 2 app using the Sencha Cmd commands. In the next post I’ll wire up Ext.Direct and open up some possibilities!

Available to help your team or project:

As always, if you need help with your project, feel free to contact me.

We currently have resources available to help your project using a wide variety of server side technologies including PHP, Ruby on Rails, Java EE, .NET and node.js. Contact us and see how we can help increase your development velocity!

Looking forward to hearing from you!

Contact

Connect with me on LinkedIn

our Direct Contact Info
and finally our Sencha Devs profile

Google+