Setting up Sencha Touch 2 App with Node.JS and Express.JS
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 v22.214.171.1242 ...
Upgrading to the latest version (I don’t need to obviously) with this command:
[whit@:~] $ sencha upgrade Sencha Cmd v126.96.36.1992 [INF] Determining the latest version of Sencha Cmd [INF] The latest version of Sencha Cmd is 188.8.131.522 [INF] Sencha Cmd 184.108.40.2062 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!
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!