Part 2/6 – Native packaging using Sencha Cmd – Packaging as Web Application


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.

Getting ready

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:

  1. Run the following command inside <your project folder>/native/TouchApp folder:
    1. sencha app build -d <Web Server document root>/touchbook -e production
  2. Access the following URL in a Sencha Touch compatible browser:
    1. http://localhost/touchbook/production
  3. You shall see the application output as shown in the below screenshot:

9185OS_11_02

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:
9185OS_11_03

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.

References

Part 1/6 – Native packaging using Sencha Cmd

Introduction to Sencha Cmd

Using Sencha Cmd with Sencha Touch

Sencha Compiler Reference

Co-founder of Walking Tree, Speaker, Sencha Trainer, Author of Sencha Charts Essentials, Sencha Touch Cookbook, Sencha MVC Architecture, and ADempiere Cookbook.

Tagged with: ,
Posted in Sencha Touch

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: