Installing Sencha Cmd & ExtJS 5.0

You may have heard about ExtJS in some aspect by now, it’s been around the block a few times now. It’s a pure html / css / javascript framework for building enterprise web applications. I’d used a previous version in the past so I had a good general idea of what to expect from the new version.

After installing it and diving head first into it however, I discovered it has changed drastically in the newest iteration. Installing and configuring it seems more complicated at first but the new “build” focused development cycle is a huge improvement over the old ExtJS.

Introducing Sencha Cmd the command line tool for building your ExtJS 5.0 application. With saas built right into the platform, this sucker is a beast.

Sencha Cmd

Taken straight from the Sencha Cmd documentation here’s a quick overview of the neat stuff it offers:

• Code Generation Tools: Code generation tools to generate entire applications and extend those applications with new MVC components.
• JS Compiler: A framework-aware, JavaScript compiler that understands the semantics of Sencha frameworks and can produce minimal footprint builds from your source. The compiler can optimize many of the high-level semantics provided by Sencha frameworks to reduce load time of your applications.
• Web Server: Provides a lightweight web server that serves files from localhost.
• Native Packaging: Native packaging to convert a Sencha Touch application into a first-class, mobile application that has access to device functionality and can be distributed in App Stores.
• Package Management System: Distributed package management system for easy integration of packages (such as Ext JS Themes) created by others or from the Sencha Package Repository.
• Build Scripts: Generated build script for applications and packages with “before” and “after” extension points so you can customize the build process to fit your specific needs.
• Tuning Tools: Powerful code selection tools for tuning what is included in your application’s final build, determine common code across pages and partition shared code using high-level set operations to get builds exactly as you want them.
• Workspace Management: Assists in sharing frameworks, packages and custom code across multiple applications.
• Image Capture: Converts CSS3 features (such as border-radius and linear-gradient) into sprites for legacy browsers.
• Flexible Configuration System: Enables defaults to be specified for command options at the application or workspace level or across all workspaces on a machine.
• Logging: Robust logging to help you understand the inner workings of commands and facilitate troubleshooting.
• Third-party Software: Sencha Cmd includes a compatible version of Compass, Sass, and Apache Ant.
• Code Generation Hooks: Can be specific to one page or shared by all pages in the workspace, for example, to check coding conventions or guidelines as new models are generated).

Install dependencies

You’ll need to install a few things before you can install Sencha Cmd. The first is Java JRE 7.

sudo apt-get install openjdk-7-jre openjdk-7-jre-lib

Next you’ll need Ruby 2.0

sudo apt-get install ruby2.0 ruby2.0-dev libruby2.0

Download and install Sencha Cmd

Now you need to download and install Sencha Cmd. Typically I create an “installs” folder in my home directory for stuff like this as follows:

mkdir ~/installs

You can find the latest version of Sencha Cmd at this link:

http://www.sencha.com/products/sencha-cmd/download/sencha-cmd-5.0.2/linux_64

I’ll use the latest version as of this article

cd ~/installs
wget http://cdn.sencha.com/cmd/5.0.2.270/SenchaCmd-5.0.2.270-linux-x64.run.zip
unzip SenchaCmd-5.0.2.270-linux-x64.run.zip
sudo chmod +x SenchaCmd-5.0.2.270-linux-x64.run
./SenchaCmd-5.0.2.270-linux-x64.run

Just skip through the license agreement then accept it and use all of the defaults. Then go ahead and logout and log back in so it’s in your path.

exit
ssh @

Now you can quickly test to see if it worked by typing the following command

sencha which

Which should display something like this

Sencha Cmd v5.0.2.270
/home//bin/Sencha/Cmd/5.0.2.270/

ExtJS 5.0

The first step is downloading the latest version of ExtJS open source free version. You can find this software by going to the following page “http://www.sencha.com/products/extjs/details” and scrolling to the very bottom, look for the download button. Click it then you can right click the link “Your file should begin downloading immediately. If not, please click here.” You will use this link down below

Generating your ExtJS App

You can place this pretty much anywhere you wish then you can configure your domains vhosts to point to the apps build/production and build/development folders to serve up the content for the respective environment. I choose to place them in the domains “private” folder then symlink the public and dev folders to act as the production and development websites.

cd ~/domains//private
wget http://cdn.sencha.com/ext/gpl/ext-5.0.1-gpl.zip
unzip ext-5.0.1-gpl.zip
rm -rf ext-5.0.1-gpl.zip
sencha -sdk ext-5.0.1 generate app ./

A little explanation here. “app-namespace” is basically the global namespace that will be used throughout the extjs app. So you will reference views and such with it. “app-folder-name” is simply the containing folders name, it’s not that important really. When this finishes you will be left with 2 folders, the one containing the ExtJS framework and the new one containing the generated ExtJS application. One final step we need to do the intial builds to generate development and production folders.

cd ~/domains//private/
sencha app build development
sencha app build production

Now we need to create symlinks to our apps build directories.

cd ~/domains/
rmdir dev
ln -s private// dev
rmdir public
ln -s private//build/production// public

It’s ready to go as-is and all you have to do now is configure your Nginx virtual hosts. Here is my production virtual host file

server {
listen 80;

root /home//domains//public;
index index.php index.html index.htm;

server_name ;

access_log /home//domains//logs/access.log;
error_log /home//domains//logs/error.log;

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
try_files $uri = 404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini

# With php5-cgi alone:
#fastcgi_pass 127.0.0.1:9000;
# With php5-fpm:
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
location ~ /\.ht {
deny all;
}
}

And for my development environment heres an example

server {
listen 80;

root /home//domains//dev;
index index.php index.html index.htm;

server_name dev.;

access_log /home//domains//logs/access.log;
error_log /home//domains//logs/error.log;

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
try_files $uri = 404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini

# With php5-cgi alone:
#fastcgi_pass 127.0.0.1:9000;
# With php5-fpm:
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
location ~ /\.ht {
deny all;
}
}

It might be better practice to break apart the log files for each domain if you wish. You’d simply need to change the file name in the log lines to something unique, like dev_error.log, dev_access.log.

Now we need to symlink the new virtual hosts and restart nginx to get it going.

sudo ln -s /etc/nginx/sites-available/dev. /etc/nginx/sites-enabled/dev.
sudo ln -s /etc/nginx/sites-available/ /etc/nginx/sites-enabled/
sudo service nginx restart

Now you should be able to see your new ExtJS app at both

http://

and for development at

http://dev.

If you are going to be working on a site for an extended period of time you should probably run sencha app watch (from within the apps root folder). I prefer to do it in a screen and then detach so i can then check in on at at a later date to look for errors, etc. Keep in mind it can use up a good amount of ram keeping this running 24/7 so I recommend only doing it when you are actively developing.

screen

A new “window” will open in console at the same path you entered screen from. From your apps root folder type

sencha app watch

Then press “CTRL+A then CTRL+Z” to detach from the screen.

Now to return to it at a later date type

screen -r

If you have more than one screen detached it will show you a list of ids that you can then provide to get the specific screen instance.