If you're already developing Sencha Touch native apps then you can probably skip most of this section and just install Sencha Touch Live
.
To use the stlive create
or stlive build
commands you must first prepare Sencha Touch and PhoneGap development environments. Refer to the System Setup as outlined in Sench Touch Guide for more details.
You'll need to download and install:
- NodeJS 0.10.x
- Ruby
- Windows: Download from rubyinstaller.org. Install the .exe file version.
- OSX: Should be installed. Check the version with
ruby -v
. - Ubuntu:
sudo apt-get install ruby2.0.0
- Sencha Touch
- Sencha Command v4.0.0.4.84
- May work with Sencha Command 5.x - not yet tested.
Unlike PhoneGap Developer App, this tool relies on the PhoneGap used by your project and attempts to be more version decoupled so should work with most versions of PhoneGap 3.x and Sencha Touch 2.x . However, to date this app has only been tested with:
- Window 7 & 8, OSX Mavericks
- Sencha Cmd 4.0.4.84
- Sencha Touch 2.3.2
- PhoneGap 3.5.0
Please log issues to record other configurations that you have tested (+ve and -ve results) so we can document your results here. Linux anyone? Thanks :) .
You can either sign up for an account at PhoneGap Build Service to compile your apps online OR use platform SDK tools to compile them on your computer. You can configure your service account name and password in your .stlive.json
files to copy them into new projects OR you can configure them in the phonegap.local.properties
file.
If you don't plan to use this service you'll also need to install the platform SDKs that include compilers and emulators or simulators.
- Android: Eclipse / Android Development Kit (ADT)
- Ensure that
$JAVA_HOME
,$ANT_HOME
, and$ANDROID_HOME
environment variables are set. - iOS: XCode for OSX
- WP8: Windows Phone 8 SDK
- iOS: iOS Simulator installs with XCode SDK and supports iPad/iPhone/iPod.
- Android:
- The Android emulator that ships with the SDK is a bit of a time waster so you might want something thats faster and simpler to use.
- I've used Geny Motion - my current preference. There are more out there I've not yet tested.
- WP8: Windows Phone 8 Emulator installs with Visual Studio SDK.
Use these tools to connect to UIWebView instances inside your mobile apps running on an simulator/emulator or USB connected devices. If you're debugging the native plugin code (Java, Objective-C, C#) - you'll need to use SDK debuggers. Make sure you've followed the instructions below to configure your hardware devices for developement mode.
- iOS: Safari Web Inspector
- Android 4.4+: Chrome Debugger. Check you have Chrome v32 or later installed on your desktop development computer.
- Android < 4.4: Weinre
If you've already installed either cordova
or phonegap
, make sure that their versions match. You can use npm update
instead of npm install
.
Mac / Linux:
$ sudo npm install -g cordova
$ sudo npm install -g phonegap
$ sudo npm install -g ios-sim # OSX only - iOS Simulator
$ sudo npm install -g ios-deploy # OSX only - Install & debug iOS apps without Xcode
$ sudo npm install -g stlive # <<<< THIS APP !
Windows:
c:\> npm install -g cordova
c:\> npm install -g phonegap
c:\> npm install -g stlive # <<<< THIS APP !
Mac / Linux:
$ sudo npm update -g stlive
Windows:
C:\> npm update -g stlive
There may be new options available that you now add to your existing ~/.stlive.json
file.
run stlive settings diff
to compare .stlive.json
with your home settings file ~/.stlive.json
or a local settings file.
Follow the Getting Started guide in README file to test your install.
The SASS language is a CSS style sheet pre-processor that is used by Sencha Touch to improve the power and flexability of defining CSS styles. In Sencha Touch projects, files in resources/sass/*.scss
are compiled into resources/css/app.css
. The SASS compass compiler can be run in watch mode so it detects changes to your *.scss
files and recompiles them. The stlive serve
server can be configured to auto start the SASS compiler so that as you make changes to *.scss
files they are auto converted to *.css
files that in turn trigger a reload of the app.
The SASS Compiler is developed in Ruby so you must first ensure that that you have installed Ruby 2.x. Ruby now ships with OSX but you may need to upgrade it so check the version using ruby --version
.
Mac / Linux:
$ sudo gem install sass
$ sudo gem install compass
$ whereis compass # Identify the install path for Compass
/usr/bin/compass # typically install here
Ensure these properties are in your ~/.stlive.json
file
"sass": false, // true if you wish to always auto start SASS compiler with stlive server
"bgtasks": {
"sass": {
"name": "Compass SASS Compiler",
"cmd": "/usr/bin/compass watch -c config.rb app.scss", <<<< CHECK compass path
"dir": "resources/sass",
"success": "Compass is polling" // Output when compiler starts ok
}
},
- Follow the Getting Started guide in README file to test your install.
Windows:
C:\> gem install sass
C:\> gem install compass
Ensure these properties are in your ~/.stlive.json
file
"sass": false, // true if you wish to always auto start SASS compiler with stlive server
"bgtasks": {
"sass": {
"name": "Compass SASS Compiler",
"cmd": "C:/Ruby200-x64/bin/compass.bat watch -c config.rb app.scss", // <<<< CHECK compass path
"dir": "resources/sass",
"success": "Compass is polling" // Output when compiler starts ok
}
},
- Follow the Getting Started guide in README file to test your install.
I've disabled a server feature that used the NodeJS socket.io
library in order to prevent this installation issue - but just case it crops again some other way I've included these notes:
If you experience any issues on Windows installing socket.io, you may need to download a version of Visual Studio Express (Free) and then make sure you have all the required software to run node-gyp
.
You can also configure the version of Visual Studio used by node-gyp
via an environment variable:
- set
GYP_MSVS_VERSION=2012
for Visual Studio 2012 - set
GYP_MSVS_VERSION=2013e
(the 'e' stands for 'express edition') - Here's the full list.