When you are building Sencha Touch applications, one of the deployment strategies is to host it as a Web application, which the target users will access from their browsers by entering the URL.
All the devices, which Sencha Touch supports, come along with Internet browsers. In this recipe we will see how we can develop a Sencha Touch application, access it, and test it using the Internet browsers.
Sencha Touch is moving towards using HTML5 features and we will require a browser, which runs on WebKit engine – Opera, Safari, and Chrome or IE10 browser. We can also test most of the things on a browser running on your desktop/workstation (except things like orientation change).
Sencha Touch applications do not work on the browsers using the Gecko engine, which includes Mozilla FireFox.
In this article, we will see how we can create a production ready package and deploy it inside the Web server.
Make sure your device has a WebKit compatible browser – Opera, Safari, and Chrome or IE10Verify that you have your GPRS or Wi-Fi enabled and working on your device so that you are able to access Internet
You shall have a Web server – such as Apache or nginx, deployed on a server, which is accessible on the Internet. E.g. I have my web server running on http://walkingtree.in
Note down the Web server’s document root folder (e.g. public_html, www, htdocs, etc.). Create touchbook folder inside the document root folder.
Make sure that you have followed Part 1 of the series to setup the environment, which we would use in this article.
How to do it…
Follow the below mentioned steps:
- Run the following command inside <your project folder>/native/TouchApp folder:
XHTML1sencha app build -d <Web Server document root>/touchbook -e production
- Access the following URL in a Sencha Touch compatible browser:
- You shall see the application output as shown in the below screenshot:
How it works…
In the above steps, we created a production version of our application as a Web application and deployed it to the Web Server by specifying the server’s root folder as the destination path to the Sencha Cmd command. The command creates a touchbook/production folder inside the Web server’s root folder with the following files inside it:
app.js is a minified version, which contains the complete Sencha Touch SDK as well as the application code
cache.appcache is the template manifest file created, which you can use to cache files on the browser side. By default, only index.html is listed in the manifest file.
resources contains the minified CSS, which combines the Sencha Touch related CSS and the application specific CSS. Also, the folder contains the related images and icons.