23 Apr 2013 4:16 AM #1
I tried several times in the past to start with Sencha. Even bought a Complete suite.
The main problem is that the installation is a real nightmare.
You have to install dozens of applications, with the correct version number (Sencha Archtitect 2.x, CMD x.x, SASS, Java x.x, etc, etc.) Mostly you have to change a lot of settings and files.
It is horrible for starting users, like me, to get things to work.
Do you work on a complete installation that is able to install all you need in one setup? I think you will please a lot of starting (and expert) users.
A workaround could be to prepare a Virtual Box with a Linux distro that includes all the apps you need. That you can start straight ahead with Sencha Architect, follow a step-by-step create my first app and deploy it without hussles to a device.
Can that be done. Or is it be done already...
24 Apr 2013 11:54 AM #2
A great idea regarding the virtualbox, I'll suggest and look into this.
We have been making strides to making this experience less tedious.
Cmd now includes SASS and Compass in the installation. It does still require Java and Ruby 1.8+.
Architect in the next release will include proper version of Cmd and frameworks built in.
We do have a complete installer that we know leaves a lot to be desired. As far as I know we are working toward improving this experience.Phil Strong
Sencha Architect Development Team
24 Apr 2013 11:59 PM #3
I have put together this step-by-step (mainly for internal use as may notice - James Cameron wasn't Director of these screencasts...) that shows the complete way to build a Sencha Ext JS monolithic build using a VM, Sencha Cmd, Ext JS and SA.
SA runs on my host system (Windows 7 64-bit) and the VM is created with Linux Mint 14 distribution. I make extensive use of the Terminal in Linux and the tab-autocomplete, so being comfortable around the Linux command prompt is recommended.
Step 1 - Create a VM using Linux Mint
Download and install Oracle VirtualBox for your host system and install it.
Download Linux Mint 14 distribution media from http://www.linuxmint.com/
I strongly recommend 64-bit version, even if you won't allocate more than 2-4GB of RAM.
Here's a video setting up the VM and doing the configuration. Steps are described below:
Create a Virtual Machine ("VM") in VirtualBox, Linux and Debian (64-bit).
Allocate 8GB of Disk and 2GB of RAM. (Your milage may vary, so change accordingly).
After creating the VM, don't start it - instead change the settings to use the ISO-image of Linux Mint that you downloaded as CD-ROM.
Boot the machine and allow the Linux Mint 14 desktop to appear.
Double-click the CD that is placed on the desktop and run through the installation wizard. The username and password you enter during the installation will be the one you should use for the "sudo" commands when prompted for a password.
Reboot the machine when prompted - remember to remove the CD-image using the menu.
When the reboot is done, install the VM guest additions with the following steps:
- In the VM menubar - select Devices -> Install Guest Additions
- A CD will appear on the desktop, click Cancel in the prompt
- Right-click the Desktop background and open a terminal
- Type "sudo -s" to become super-user - you are prompted with the password you entered during installation
- Type "cd /media/<username>/VBOXADDITIONS_x.y.z_build/" (fill in accordingly, vill be different depending on your version of VirtualBox)
- Type "./VBoxLinuxAdditions.run" to start the installer
- Answer "yes" when prompted to replace the drivers that are already ionstalled
- Finish installation and then reboot ("/sbin/init 6" command) the VM
Download Sencha Cmd from Sencha web-site
Unzip and change the permissions of the installer:
- Open a Terminal
- cd to the Download directory
- unzip the SenchaCmd installer
- Change permissions to 755 of the installer
- Run the installer and allow Sencha Cmd to install
- Switch to super-user with "sudo -s"
- Run "apt-get update"
- Install ruby using "apt-get install ruby"
- Close the terminal window and open a new one (to get path set correctly)
- Verify that Sencha Cmd is working by typing "sencha" - you should see the version number
Open a Terminal window and create a working-directory inside ~/Documents with the name sencha-cmd (when you right-click the Desktop to open a Terminal you will have ~/Desktop as working-directory)
- cd ../Documents/
- mkdir sencha-cmd
- cd sencha-cmd
- cp ../../Downloads/ext-4.2.0-gpl.zip .
- unzip ext-4.2.0-gpl.zip
- cd ext-18.104.22.1683
- sencha generate app demo ../demo-app
- cd ../demo-app
- sencha app build
Step 3 - Set up integration between VM and your host computer using Shared Folder
To be able to transfer files between my host computer (where I run Sencha Architect) and the VM (where I run Sencha Cmd) I use VirtualBox's Shared Folder approach.
I first create a directory on the host system where I will put Sencha Architect's files when publishing.
Create a new Ext JS project in SA, place a viewport and a panel and then make sure to change the name of the Application (to "HW" in this example).
Set the publish path to the planned shared directory and do a publish to that directory from SA. Make sure not to have any spaces or other strange characters.
Shutdown the VM and go to VirtualBox manager and edit the settings for the Sencha Cmd VM.
Point to the directory above the one the one you did the publish to and setup this with auto-mount and full access.
The directory will be available in the VM with the path /media/sf_<name of directory> - we will call it /media/sf_xxx going forward.
But - we need to change group membership of that user we have created when installing (my username was "msa").
Start the VM and then right-click the desktop in the VM to get a Terminal.
- "whoami" to get my username
- "sudo usermod -a -G vboxsf msa" to set my account to belong to the group vboxsf to get access
- "cd /media/sf_xxx"
- touch testfile
- rm testfile
Step 4 - Create a new Sencha Ext JS project with Sencha Cmd
A new project with the same name as the one in SA ("HW") should be created using Sencha Cmd. Open the VM and change to the Ext JS framework directory and then create a new project, matching the name of the SA project.
- sencha generate app HW ../HW-build
- cd ../HW-build
- sencha app build
Step 5 - Merge the stuff from the published SA project
We have the skeleton project created with Sencha Cmd in step 4.
To copy our SA project we need to delete the ./app directory and then copy the app/ directory and app.js file from the publish directory.
The steps to make this while in the skeleton directory are:
- rm -rf ./app
- cp -R /media/sf_xxx/<publish-directory>/app .
- cp /media/sf_xxx/<publish-directory>/app.js app
- sencha app build
Open the generated single file and enjoy!
When making changes in SA - publish and then repeat step 5 to build a new version.
Hope this helps someone out there!
Last edited by tangix; 26 Apr 2013 at 2:35 AM. Reason: typos, typos.... Added sudo info based of feedback.
25 Apr 2013 5:35 AM #4
25 Apr 2013 5:39 AM #5
But it's all inclusive - setting up VM, Shared Folders, ruby, Sencha Cmd, Architect and how to create your compiled project - all in 5 "easy" steps (once you know how to do it )
After struggling with Sencha Cmd on both Mac and Windows, ending up with hosed systems in both cases, I gave up and went the VM route.
25 Apr 2013 9:49 AM #6
Great share. I've referenced that post in the jira story I created to do something similar shared from Sencha.Phil Strong
Sencha Architect Development Team
6 May 2013 1:09 AM #7
What do you mean with 'Jira story'. Would you make an ISO that we can download or would you reference to the steps of tangix? (great work tangix!)
My experience is that the description of tangix would work now, but will fail with a next version. If you prepare a up-to-date ISO that users can download they start right out of the box.
(Better it would be in the Cloud .
30 Dec 2013 9:21 AM #8
This post helped me so much! We use a similar (though not exact) VM setup and after struggling with Sencha Cmd for almost TWO DAYS, steps 4 and 5 got me going in the correct direction.
The only thing I had to do differently (which may help others in the same situation) is in Step 5 part 3, instead of copying app.js to the app directory:
cp /media/sf_xxx/<publish-directory>/app.js app
I had to copy the app.js to the publish directory:
cp /media/sf_xxx/<publish-directory>/app.js .
Cheers and thanks again!
30 Dec 2013 2:04 PM #9
Thanks!SA3 is much more self-contained and easier to set up. However, I never got it to run on my Windows 7 64-bit so I setup another VM and running SA3 and building inside that machine.