Installing Sencha Touch on MacOSX Take 2

It took me 3 hours to install Sencha-touch-2-1.1.0 due to some permission issues. But it took me practically the whole day to try to install SenchaSDKTools-2.0.0-beta3-osx, which I downloaded from here. 

Here are a couple of error messages I got after I installed the Sencha SDK Tool and typed "sencha" in the Terminal:

1. The current working directory (/Projects/SenchaTouch2/sdk) is not a recognized Sencha SDK or application folder. Running in backwards compatible mode.
2. Error: Cannot find module '/Projects/SenchaTouch2/sdk/command/sencha.js'...

I tried everything, including the following:

1. Uninstalled and reinstalled Sencha Touch and Sencha SDK Tool. But this time, instead of installing the 2 applications in my user directory, I installed them directly at the root. All objects from Sencha Touch and Sencha SDK Tool are in the /Projects/SenchaTouch2/sdk directory. Just make sure that sdk folder have the right permission (using Get Info.)

This means that I had to change my user configuration file by entering the command in my Terminal:

sudo pico /etc/apache2/users/`whoami`.conf

 And change my httpd.conf file by entering the command:

sudo pico /etc/apache2/httpd.conf

2. Do NOT do this --> Created a system file called '.senchasdk' using the command:

sudo nano /Projects/SenchaTouch2/sdk/.senchasdk

NOTHING WORKED. 

I was about to give up. 

I decided that there is only 1 thing left for me to do. Install the previous version... and it worked.

For the Sencha Touch, I used sencha-touch-2.0.1-rc, which I downloaded from here.

For the Sencha SDK Tool, I used SenchaSDKTools-2.0.0-beta2-osx, which I downloaded from here.

1. I installed both of them in the /Projects/SenchaTouch2/sdk/ directory. 

2. Using Terminal, type:

cd /Projects/SenchaTouch2/sdk/sencha

SUCCESS!!!

No more error messages. Next step was to execute the Sencha commands as documented here. I was so happy to see all the files and directories finally being generated with no issues.

And finally, after all that hardwork, I finally get to see this screen:

If you have not read my first installation entry here, don't forget to install Compass.

Permissions

You cannot access your Sencha Touch URL due to the "403 Forbidden" screen of death. 

Let me help you.

1. Access the Terminal

You can locate the Terminal in your Applications --> Utilities directory. 

I highly suggest that you keep this application in your dock since you will soon be best friends with this application.

2. Create Alias and Configure Permissions

First of all, doesn't the URL below look a lot nicer? It is shorter and a lot easier to remember. "st2" replaces "/<username>/Projects/SenchaTouch2/" in our directory structure. This is called the alias.

This has nothing to do with permissions, but I thought it would be nice to just include it here.

a. Access the httpd.conf file.

Using the terminal, type the following command:

sudo pico /etc/apache2/httpd.conf

It will require the password of your MAC's admin account. 

b. Change the httpd.conf file.

Put this code right before the line that I highlighted in red. Don't forget to replace all occurrences of "<username>" with the user account name:

Alias /st2 /Users/<username>/Sites/Projects/SenchaTouch2
<Directory "/Users/<username>/Sites/Projects/SenchaTouch2">
    Options +Indexes FollowSymLinks +ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
# User home directories
Include /private/etc/apache2/extra/httpd-userdir.conf

Press Control-X, letter 'Y' for yes and press ENTER when you are finish.

3. Change your user's configuration file.

Using the terminal, type the following command:

/etc/apache2/users/`whoami`.conf

It will require the password of your MAC's admin account.  

Put this code and don't forget to change <username>:

<Directory "/Users/<username>/Sites/">
     Options Indexes MultiViews
     AllowOverride All
     Order allow,deny
     Allow from all
     Options +FollowSymLinks
</Directory>
<Directory "/Users/<username>/Sites/Projects/SenchaTouch2">
    Options +Indexes FollowSymLinks +ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

4. Test the Alias and Permissions.

a. Restart the web server.

To restart the web server, simply tick and untick "Web Sharing". 

b. Access the Sencha SDK using the Alias.

Use the URL : http://localhost/st2/sdk/

If everything goes according to plan, then you should see the documentation for Sencha Touch. CONGRATULATIONS! Otherwise, go to step 5.

5. Check the permissions of the relevant directories.

Go to Finder and navigate to all the relevant directories. Go to Get Info.

Check/Change the privileges of the user. Do not forget to restart the web service (Web Sharing).

Installing Sencha Touch on Mac OSX

Let's just get down to business and try to install Sencha Touch.

 NOTE: I had since changed the install process due to numerous failed attempts at 
 installing Sencha SDK Tool. See the new process here. (11.11.2012)

Sencha did a great job describing the installation process for MAC here, but it still took me 3 hours just to get it up and running on my local webserver. 

I will save you 3 hours and try to consolidate all the lessons I learned from this process. You can try this site, which I found to be the most useful source of information.

1. Download Sencha SDK here. 

While you are downloading Sencha, proceed to step 2.

2. Install Compass.

Access Terminal (Applications--> Utilities) and type:

sudo gem install compass

3. Start your web server.

Apache is already available in MAC. All you have to do is configure it and fix all the permission issues. It took me 3 hours to fix all the permission problems.

a. Activate Web Sharing.

Once you've turned on Web Sharing, you should see the screen below when you access the URL "http://localhost/~username/"

The "username" is usually the name you see in this directory.

BUT, more accurately, you should go to Terminal (Applications --> Utilities) and type "whoami".

b. Activate your firewall.

Go to the advanced setting and tick the 2 checkboxes below.

4. Organize your Sencha project directory.

Navigate to your Users directory.

Under the Sites directory, create Projects --> SechaTouch2 --> projects directories, as shown in the image below.

5. Install the Sencha Touch sdk.

Unzip the contents of the Sencha Touch SDK you downloaded from step 1 into the SenchaTouch2 directory. Rename "sencha-touch-2" directory to "sdk. Your directory structure should look like the image below.

6. Test the installation.

If you installed the SDK correctly, you would be able to access the local Sencha SDK using the URL: "http://localhost/~username/Projects/SenchaTouch2/sdk/docs/".

BUT, most probably, you will have some permission issues.

This way please.