Lubos Rendek

The only solution is determination.

Installation & Getting Started Tutorial With Sencha Ext JS 5 on Ubuntu/Debian Linux

| Comments

In this short guide we will install and build a simple default application with Sencha Ext JS CMD 5. This Getting Started guide is a rewrite of the official OS agnostic guide published on sencha.com. In the first step download Ext JS CMD 5 32bit or 64bit package. If unsure then download 32bit version. Once ready unzip it:

1
2
3
4
5
$ ls SenchaCmd-5.0.0.114-linux-x64.run.zip 
SenchaCmd-5.0.0.114-linux-x64.run.zip
$ unzip SenchaCmd-5.0.0.114-linux-x64.run.zip 
Archive:  SenchaCmd-5.0.0.114-linux-x64.run.zip
  inflating: SenchaCmd-5.0.0.114-linux-x64.run

The above will extract pre compiled SenchaCmd-5.0.0.114-linux-x64.run executable to be used to install Sencha Ext JS CMD 5 locally. In the next step we will install Ext JS CMD 5 in a user space without administrative privileges. First make your *.run file executable:

1
2
3
4
5
$ ls -l SenchaCmd-5.0.0.114-linux-x64.run
-rw-r--r-- 1 lubos lubos 43172707 Mar 28 16:00 SenchaCmd-5.0.0.114-linux-x64.run
$ chmod +x SenchaCmd-5.0.0.114-linux-x64.run
$ ls -l SenchaCmd-5.0.0.114-linux-x64.run
-rwxr-xr-x 1 lubos lubos 43172707 Mar 28 16:00 SenchaCmd-5.0.0.114-linux-x64.run

Now we can start the installation:

1
$ ./SenchaCmd-5.0.0.114-linux-x64.run

Choose installation directory. The default is ~/bin however feel free to choose any other directory within your home directory. The installation will actually create a new directory “Sencha” as a result it is fine to use your home root directory eg. /home/lubos: We are almost ready! Senha installation should modify your .bashrc file to include the following to lines:

1
2
3
$ grep Sencha ~/.bashrc 
export PATH=/home/lubos/Sencha/Cmd/5.0.0.114:$PATH
export SENCHA_CMD_3_0_0="/home/lubos/Sencha/Cmd/5.0.0.114"

The above lines will set our shell environment to make sure that Sencha EXT JS 5 CMD executables are available from a command line. Now either start new terminal or source your .bashrc file:

1
$ . .bashrc

At this point we should be ready to generate new app using sencha command:

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sencha generate app -ext MyApp ./myApp
Sencha Cmd v5.0.0.114
[INF] Source File : http://cdn.sencha.com/cmd/packages/catalog.json
[INF] Downloading : ....................
[INF] Downloading ext package...
[INF] Source File : http://cdn.sencha.com/cmd/packages/ext/5.0.0.736/ext.pkg
[INF] Downloading : ....................
[INF] Extracting ext package...
[INF] Package is already local: ext/5.0.0.736
[INF] Extracting  : ....................
[INF] Loading app json manifest...
[INF] Writing content to /tmp/myApp/bootstrap.js
[INF] Writing content to /tmp/myApp/bootstrap.json

Next, check what java version is installed on your system. Sencha Ext JS 5 CMD requires java version => 1.7. Otherwise, we would would not be able to start a local web development server and we will see error message:

1
2
Sencha Cmd v5.0.0.114
[ERR] App Watch requires a minimum of java version 1.7 (current is 1.6.0.31).

Checking java version:

1
2
3
4
$ java -version
java version "1.6.0_31"
OpenJDK Runtime Environment (IcedTea6 1.13.3) (6b31-1.13.3-1~deb7u1)
OpenJDK 64-Bit Server VM (build 23.25-b01, mixed mode)

If your version is 1.7 or higher go ahead and start your development server with:

1
2
$ cd myApp/
$ sencha app watch

Otherwise if you are running Debian you are most likely to have java version 1.6. Next we will install java 1.7 and update system’s java alternatives:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ su
Password: 
# apt-get install openjdk-7-jdk
# update-alternatives --config java
There are 2 choices for the alternative java (providing /usr/bin/java).

  Selection    Path                                            Priority   Status
------------------------------------------------------------
* 0            /usr/lib/jvm/java-6-openjdk-amd64/jre/bin/java   1061      auto mode
  1            /usr/lib/jvm/java-6-openjdk-amd64/jre/bin/java   1061      manual mode
  2            /usr/lib/jvm/java-7-openjdk-amd64/jre/bin/java   1051      manual mode

Press enter to keep the current choice[*], or type selection number: 2
update-alternatives: using /usr/lib/jvm/java-7-openjdk-amd64/jre/bin/java to provide /usr/bin/java (java) in manual mode
# java -version
java version "1.7.0_55"
OpenJDK Runtime Environment (IcedTea 2.4.7) (7u55-2.4.7-1~deb7u1)
OpenJDK 64-Bit Server VM (build 24.51-b03, mixed mode)

Now we are ready to start our development server:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ cd myApp
$ sencha app watch
Sencha Cmd v5.0.0.114
[INF] Loading app json manifest...
[INF] Writing content to /tmp/myApp/bootstrap.js
[INF] Writing content to /tmp/myApp/bootstrap.json
[INF] merging resources into /tmp/myApp/build/testing/MyApp/resources
[INF] merged 183 resources into /tmp/myApp/build/testing/MyApp/resources
[INF] merging resources into /tmp/myApp/build/testing/MyApp
[INF] merged 0 resources into /tmp/myApp/build/testing/MyApp
[INF] writing sass content to /tmp/myApp/build/temp/testing/MyApp/sass/MyApp-all.scss.tmp
[INF] appending sass content to /tmp/myApp/build/temp/testing/MyApp/sass/MyApp-all.scss.tmp
[INF] appending sass content to /tmp/myApp/build/temp/testing/MyApp/sass/MyApp-all.scss.tmp
[INF] writing sass content to /tmp/myApp/build/temp/testing/MyApp/sass/config.rb
[INF] executing compass using system installed ruby runtime
   create MyApp-all.css 
[INF] Mapping http://localhost:1841/ to /tmp/myApp...
[INF] ------------------------------------------------------------------
[INF] Starting web server at : http://localhost:1841
[INF] ------------------------------------------------------------------
[INF] Waiting for changes...

Now you are ready to see your first default sencha EXT JS 5 page by following http://localhost:1841 URL. Enjoy ! …

Comments