How to Set Up Your Sencha Environment

Posted on in Sencha

While teaching Sencha app camps and training classes, every now and then I see common app build problems related to the installation of the Sencha environment. It’s important to understand the dependencies to get yourself up to speed. In this article, I’ll provide an overview of the dependencies and show you how to get everything set up correctly.

Getting Started

Let’s take a look at the dependencies, in order to use Sencha Cmd as a build and code generation tool, you will need to have the following setup, as a base:

  • Java Runtime Environment
  • Ruby
  • Sencha Cmd
  • Sencha Frameworks

Java, Ruby and Sencha Cmd must be available from the command line to use these features. When installing Java, Ruby or Sencha Cmd, usually the installer will add it to the PATH system variable. However, sometimes these variables get lost or were not added at all. When that’s the case, these tools are not available on the command line, so Sencha Cmd can’t access them. It’s very important that these paths are set, so let’s look into how to set the system path variable. If you know this process, you can skip the next paragraph.

How to Set a System Variable

I will explain how to add a variable to the PATH on different systems. Later in this article, I will discuss the variables and paths to set.

Windows

  • Windows XP
  • Windows Vista
  • Windows 7
  • Windows 8

Mac OSX / Linux

  • Bash shell

Windows XP

  1. Start -> Control Panel -> System -> Advanced
  2. Click on Environment Variables, under System Variables, find PATH, and click on it.
  3. In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value.
  4. Close the window and reopen the command prompt window.

Windows Vista

  1. Right click My Computer icon
  2. Choose Properties from the context menu
  3. Click Advanced tab (Advanced system settings link in Vista)
  4. In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value.
  5. Close the window and reopen the command prompt window.

Windows 7

  1. Select Computer from the Start menu
  2. Choose System Properties from the context menu
  3. Click Advanced system settings > Advanced tab
  4. Click on Environment Variables, under System Variables, find PATH, and click on it.
  5. In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value.
  6. Close the window and reopen the command prompt window.

Windows 8

  1. Drag the Mouse pointer to the Right bottom corner of the screen
  2. Click on the Search icon and type: Control Panel
  3. Click on Control Panel > System > Advanced
  4. Click on Environment Variables, under System Variables, find PATH, and click on it.
  5. In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value.
  6. Close the window and reopen the command prompt window.

Mac OSX / Linux

  1. Edit the bash profile (~/ .bash_profile)
  2. Modify PATH variable, write the following line, with the path to one of the tools:
    1. export PATH=<PATH-TO-ADD-HERE>:$PATH
  3. Save and close the file and open a new terminal window

NOTE: The .bash_profile is a hidden file, to enable hidden files in Finder, run the following command from the command line:

defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder

Java Runtime Environment

Java Runtime Environment is required by the build tools of Sencha Architect (Sencha Cmd). You will need a valid build to display your app stylesheet, so it’s necessary to have Java installed.

To check if you have Java running, type the command below from the command line. (Mac OSX users, open the terminal, Windows open the command line by entering cmd from the start screen.)

java -version

If correctly installed, it should output the version number. For example:

>java -version
java version "1.7.0_40"
Java(TM) SE Runtime Environment (build 1.7.0_40-b43)
Java HotSpot(TM) 64-Bit Server VM (build 24.0-b56, mixed mode)

The JRE is the Java Runtime Environment. It’s an implementation of the Java Virtual Machine which actually executes Java programs. Without JRE. you can only compile the application but you can’t run it.

The JDK is the Java Development Kit. It’s a software bundle that you can use to develop Java based software. Since JRE contains the JVM which executes the byte code generated from the javac compiler, you need to add your JRE path to JAVA_HOME variable from the environment variables.

Note: the JDK contains the JRE, so if you have set your PATH properly you shouldn't need a separate entry for the JRE.

You can download Java JRE 1.7 or the JDK.

Windows users:

Run these commands from the command line to add Java to your PATH:

variable name:
JAVA_HOME
variable value:
c:jdk1.7.0_40
variable name:
PATH
variable value:
%PATH%;%JAVA_HOME%bin

Mac OSX / Linux users:

Assume Java is installed in /Library/Java/JavaVirtualMachines/<java version>/. Run these commands in your terminal to add Java to your PATH:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_40.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

For more information see: http://java.com/en/download/help/path.xml

Ruby

Sencha Architect uses Ruby during the app build process when building a theme. Theming in Sencha frameworks requires Sass & Compass. You don’t need to install those two dependencies since they ship with Sencha Cmd and Sencha Architect, but Sass & Compass run on top of Ruby, so Ruby is required.

To check if Ruby is correctly installed, run the command below from the command line. (Mac OSX users, open the terminal, Windows open the command line by entering cmd from the start screen.)

ruby -v

If correctly installed, it should output the version number. For example:

> ruby -v
ruby 2.0.0p451 (2014-02-24 revision 45167) [universal.x86_64-darwin13]

Ruby is automatically installed on Mac OSX machines. Windows users will have to download Ruby. Sencha Architect works with both Ruby 1.9 and Ruby 2.0 versions.

You can download Ruby.

Make sure you run the Ruby installer with admin rights (right click on the installer executable and select run as administrator.) During the installation, you will have to check the checkbox which asks to add Ruby to your PATH variables.

Sencha Cmd

To build applications with Sencha Architect, it requires the build tools, Sencha Cmd. Since Sencha Architect runs on top of Sencha Cmd, you don’t need to install Sencha Cmd because it’s included with Sencha Architect.

Sencha Cmd is a very useful set of tools. You can not only build your applications with it, you can also build themes, generate code or use the built-in (Jetty 8.1.7) web server.

You can test if Sencha Cmd is available from the command line by entering the following:

sencha which

If correctly installed, it should output the version number. For example:

> sencha which
Sencha Cmd v5.0.0.116
/Users/leeboonstra/bin/Sencha/Cmd/5.0.0.116/

It requires that Sencha Cmd is added to your PATH variables. This should happen automatically when installing Sencha Architect or Sencha Cmd. If it’s not available, you can download and reinstall Sencha Cmd:, or you can add the paths manually on the command line:

Windows users:

Assume Sencha Cmd is installed in c:senchacmd5.0.0.116.

variable name:
PATH
variable value:
%PATH%;c:senchacmd5.0.0.116

Mac OSX / Linux users:

Assume Sencha Cmd is installed in ~/bin/sencha/cmd/5.0.0.116.

export PATH=~/bin/Sencha/Cmd/5.0.0.116:$PATH

The build tools also need to be enabled in Sencha Architect. Verify Sencha Cmd is enabled by navigating to Settings > Project Settings Framework:

Sencha Frameworks

Check out the following Sencha product pages, to download the latest downloads for Ext JS or Sencha Touch.
Sencha Touch, Sencha's framework to create multi-device/mobile apps is free to use, and can be found here:
http://www.sencha.com/products/touch/. Ext JS is Sencha's framework to create desktop/tablet web applications with, for more information take a look into the product page at: http://www.sencha.com/products/ext/.

In case you have questions about your Sencha setup, feel free to comment underneath this post!

Ext JS 6

Update:
I wrote a new setup guide for Ext JS 6 development. Please check this link:
http://se.sencha.com/setup-guide/

Comments

  1. levan says on
    July 30, 2014 at 6:11 pm
    Reply

    soo, how do you reference ruby installer without admin privileges, as you “might not know” most of corporate developers do not have admin privileges. 🙂
    does sencha have way to configure ruby instalation location, or can it work without ruby? this soulds like a stupoid dependency to have, what if we do not want to use sass
    ?

  2. Jens says on
    September 14, 2014 at 9:10 am
    Reply

    Hi Lee,

    I have a really hard time getting Sencha Cmd up and running. Or lets better say to get it working properly

    sencha app build production starts working but then all of a sudden I always get an “Access denied” error:

    Caused by: C:Program Files (x86)ZendApache2htdocspathtoappbuildproductionMobileAppresources (Access is denied)

    The folder exists. It is even generated by Sencha Cmd (I deleted the complete build folder and it is created during sencha app build production). I also tried to set access rights. Didn’t help. btw: It’s on a Windows 7 machine.

    Do you have any idea?

    Thanks,

    Jens

  3. Anchal Patel says on
    September 30, 2014 at 7:00 pm
    Reply

    Hi
    i have below error

    Downloading http://cdn.sencha.com/cmd/version.properties to C:UsersmeAppDataLocalTempsencha1412099911192version.properties
    sun.net.www.MessageHeader@2f0a87b35 pairs: {GET /cmd/version.properties HTTP/1.1: null}{User-Agent: Java/1.8.0_20}{Host: cdn.sencha.com}{Accept: text/ht
    age/gif, image/jpeg, *; q=.2, */*; q=.2}{Connection: keep-alive}

    this is the error i get when i run
    >sencha -d upgrade –check

    almost all sencha commands get stuck on this

  4. jabrane says on
    January 15, 2015 at 2:13 pm
    Reply

    Hello thank you very much for all the content of your site it’s very good to khnow.
    About Extjs 5 , have you think to write ebook or some posts about using the feature of sencha extjs, about extension plugins all new technologies used in this new framework extjs 5.1 and all we need for developper .
    You have a good post and good job .

  5. Lee says on
    January 29, 2015 at 8:47 am
    Reply

    Thanks, Jabrane!
    Actually I have been thinking about this.
    For Sencha I wrote a lot of the course materials about Ext JS 5, so I could easily start writing a new book, 😉

    But you know, writing a book also cost a lot of time.. Actually I am enjoying it now to have some free time when I am not working.. – but who knows 🙂

  6. prasadsubbu says on
    April 28, 2015 at 2:10 pm
    Reply

    Lee,

    I am transitioning from win 7 32 bit to win 7 64 bit machine. Do we have a 64 bit version of Sencha Architect? If so, then I should install all dependencies for Sencha Architect in 64 bit version, right?(ruby, jre …).

    Thanks in advance for your reply.

    • Lee says on
      April 30, 2015 at 1:32 pm
      Reply

      Hi prasadsubbu.
      I don’t think we have a 64bit version of Sencha Architect for Windows. – There is just one windows version available via the download site…

      Cheers,
      Lee

  7. A says on
    July 23, 2015 at 8:02 am
    Reply

    Hii. Lee, Could you please explain me process of building sencha prodution build in mac.

    • Lee says on
      August 17, 2015 at 7:22 pm
      Reply

      Sure, for Mac and Windows it’s about the same.

      We have build processes running on top of Apache Ant. It creates a build package with one single JavaScript file. It takes a look into the dependencies (from the requires array, and extends etc) and puts it for you in the right order. (So dynamic loading from the microloader takes no effect anymore). For a production build it will minify this JS file.

      On top of that, it will also compile the Sass theme to one single minified CSS file.
      And it creates a new the index.html file, (loading the JS and CSS builds) with a resources (images etc) folder.

      Ext JS 6 and Sencha Touch also creates a folder with deltas (differences between builds), and an app cache (in case you want to provide offline support).

  8. Pingback: How to generate your first extjs 6 project

Post a Comment

Your email is never published nor shared.
Required fields are marked *