Tutorial: Sublime Text for Titanium & Platino (Code + Build + Debug)

In this tutorial I am going to teach you how to use wich I consider to be the best code editor ever, Sublime Text to code for Appcelerator Titanium.


Why not using Titanium’s own IDE?

Titanium’s IDE is based on Eclipse, a Java IDE known for its flexibility and for being a powerful tool with so many options you’ll never end up knowing half of them. That flexiblity and its Java foundation come at a price, it is very slow and sluggish.

I have been a Sublime Text user for quite a while and totally love its speed, flexibility in letting you decide what it has to have and what you don’t need and the ability to build for almost everything with just a little effort in setting it up.

Sublime Text

So the choice is clear for me, I want to use Sublime Text for my developments with Appcelerator Titanium and Platino. So… what do I need for that?


Installing Node.js

Node.js

We will first install Node.js. We will not discuss the utility of Node.js here as it’s out of the scope of this tutorial, but its installation package includes a command-line utility we will use later: npm. Installing Node.js is probably the easiest way to get npm on a Mac computer. But we have to be aware of something, later versions of Node.js cause some issues when building for Appcelerator Titanium so we have to double check we are getting version 8.22. The link to a direct download is here.

I recently discovered that statement wasn’t true, changing Node version could cause some issues with Titanium Studio, but reinstalling the whole SDK fixes any issues if they happen to pop for you. So I’m now linking to the latest and greates version of it, wich you can find here.

Installing Node.js

Node.js installs as a common .pkg file for Mac: double-click – next – next – ready to go!


Installing Titanium’s CLI

Don’t fear the Terminal.app! Now it’s time for us to install the Command Line Interface (CLI) for Appcelerator Titanium. We will use it to update our Titanium SDK and build from Sublime Text without ever having the need to open Titanium’s IDE.

We will use our recently installed npm from the Terminal.app to install Titanium’s CLI. Just open Terminal.app and type the following command:

sudo npm install titanium -g

Right after the process finishes we have to install the latest SDK with the next command:

sudo titanium sdk install --branch 3_1_X --default

There are lots of useful commands for Titanium’s CLI here but for now we only want to know how to update it when a new version of the SDK comes out, we will do that with this command:

sudo titanium sdk update -install

Titanium CLI

Now we have all Titanium’s functionality accessible from the terminal, that doesn’t mean we have to use it from there, but other software as Sublime Text, will be able to launch commands to it and create our builds without having to leave our favourite editor.


Install Alloy

Our next step will be installing Alloy. This is a Model-View-Controller framework for Appcelerator Titanium but for this tutorial we will treat it just as a pre-requisite.

Having npm installed, installing Alloy couldn’t be easier, just throw a new command to the terminal:

sudo npm install -g alloy

At this stage we have our Titanium’s setup ready to go. I consider learning how to load an external module would be great for this tutorial as later on working with Sublime will make us do some small things in a different way. So the next step…


Adding an external module to Titanium

To add an external module to Titanium and have it available for as many projects as we could want, we have to store the module folder in a special location, the Application Support folder for Titanium wich is located into our Mac’s Library folder.

The trick is the Library is hidden in Mac OS-X Lion/Mountain Lion and to get there the easiest way is following these simple steps:

  • Click the desktop and make sure your Mac’s top bar shows Finder as the current app in use.
  • Click Go on the top bar.
  • Hold the Alt/Option key on your keyboard, notice that the Library link only appears when you are holding that key.
  • Click Library

Even if my computer is in spanish, I think this screenshot will help make it clear:

Acessing Library

Now from there you just have to navigate through folders following this:

  • Application Support
  • Titanium
  • modules
  • [iphone/android]

Once you get on your iphone or android folder, depending on wich os are you installing the module for, you can drop the module folder there.

For those curious about how I managed to make a screenshot of that if having the Alt/Option key down doesn’t allow to create screenshots, there goes an additional candy, just use your terminal and type a command to make a delayed screenshot (5 seconds in this case):

screencapture -T 5 screenshot.png

Installing Sublime Text

Sublime Screenshot

Now it’s time to download and install Sublime Text if you haven’t already. Sublime installs as a typical .dmg file for Mac, so nice and easy, we can go right to our next step.


Installing Package Control for Sublime

At this stage you can already test Sublime Text and code a little with it to learn how sweet this editor is with its split views, integrated console and lightning fast speed. You can also start learning tricks like multiselection of word instances with Cmd-D and lots more. But as we just installed it, it’s not ready to fully replace Titanium’s IDE as we don’t have code completion or building features.

To get those we are going to install the most essential plugin for Sublime, Package Control. This plugin will allow us to comfortably install or remove other plugins from Sublime itself and to install it, we have to follow the next steps:

  • Having Sublime in use, go to the menu bar and click View.
  • Click Show Console.
  • Copy the following command and press Enter.
 import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read());print('Please restart Sublime Text to finish installation')

Done! After restarting Sublime, we have Package Control online and we can press Cmd + Shift + P to start using it. As it can be a little confusing the first time, we are going to see how to install the needed packages step by step in the next section.


Installing packages for Titanium development

Depending on our personal preferences we may be interested in more or less packages for our coding sessions. There is a fair amount of packages available, for many coding languages and uses, even to launch searches on various sites like Stack Overflow, for example.

For the purpose of this tutorial we should install the next packages:

  • Javascript Snippets: Collection of pre-written JavaScript functions.
  • SublimeCodeIntel: Support for basic code completion.
  • SublimeLinter: An ego killer, live syntax error detection without concessions. It really helps to write better code.
  • Tita: Code completion for Titanium’s API.
  • Titanium Build: Project builder/compiler for Titanium.

Installing a package is done by calling Sublime’s command prompt with Cmd + Shift + P and start typing Package install. We’ll see that it soon will point to Package Control: Install Package and if we press Enter at that point Package Control will fetch all available packages from the internets and show us a list to choose from. We can start typing the name of every package we need and press Enter to install it.

Repeating that process for every package we need we will end up having a super-charged JavaScript editor with Titanium features.


Creating a new Titanium project

Ok, this is the point where all this workflow could break apart… but hopefully it won’t.

Creating a new Titanium project with this setup means creating lots of files, folders and subfolders manually, something that’s not productive at all. I recommend at least once, creating an empty project from Titanium’s IDE and storing it as a folder we will copy-paste for all our future developments.

Titanium New Project

Another option could be opening Titanium’s IDE to create every new project we are going to work on, wich is not too traumathic either.


Adding an external module without Titanium’s IDE

To close the circle about things done differently working with Sublime vs Titanium’s IDE we need to know how to attach the module we previously stored in our Mac’s Library and tell our code we want to use it.

With Titanium’s IDE we can graphically load a module into a project editing the tiapp.xml file. Titanium masks what this file really is with a graphical interface by default, but working with Sublime, what we will have is a raw .xml file. So to add our module into the newly created project we have to search for the modules section into the file and put the exact name of the module there.

As an example I’m attaching a the modules section form one of my tiapp.xml files. There is where you have to put the name of the module you want to use.

<modules>
    <module platform="android">co.lanica.platino</module>
    <module platform="iphone">co.lanica.platino</module>
</modules>

Building from Sublime

If you have come all the way down to here you’ll have a superpowered JavaScript focused Sublime, a Titanium CLI ready to receive commands and an already created Titanium project you want to work on. Go on and open the project’s folder with Sublime.

The final step will be telling Sublime to use the builder we installed as a package before with this project. To achieve that go to the menu bar and follow the path:

  • Tools
  • Build System
  • Titanium

That will do! Now to build and test your projects from Sublime you just have to press Cmd + B and select your target: Device, Simulator, iOS, Android… to build it and launch it wherever you need.


Additional Improvements

Since the latest version of Titanium CLI, last used iOS simulator is no more saved for next build and this process always launches iPad Retina or iPhone Retina as default, to correct this I’ve made some tweaks on the Titanium Build plugin. Here’s what you have to do to have this useful extended menu when you choose building for iOS Simulator…

BuildIOSSublimeMenu

First access your Sublime packages folder with Sublime’s menu link…

SublimeBrowsePackages

This will open the folder where all Sublime packages are stored, now enter the folder Titanium Build and replace Titanium.py file with my tweaked version wich you can download from here.

That’s it! you don’t even have to restart Sublime to see the changes in action, just build as usual!

Please notice this file has been updated today (08/08/2013) and now also includes a section to DEBUG when invoked from Sublime and selecting iOS: SIMULATOR-DEBUG. We will get into this at the end of this tutorial.

Another thing annoying people quite a bit is they are getting this error when building from Sublime on some versions of Titanium SDK:

env: node: No such file or directory

Unfortunately I don’t have such a comfortable solution as before for this, but you can workaround the error by starting Sublime from the Terminal.app. If I stumble upon a better solution I will update this post with it so we don’t even have to do that.


Now Let’s Debug

Now I’m going to show you how to solve debugging with an awesome tool from Olivier Morandi, that is Ti-Inspector

Ti-Inspector will allow us to plug a terminal debugging session launched from Sublime to Google Chrome so we can use its full set of JavaScript debug utilities with our projects, with the evident exception of those dedicated to DOM and purely website focused. If you don’t have Chrome installed on your machine please proceed installing it as an usual mac app from here.


Installing Ti-Inspector

Next step will be installing Ti-Inspector from the Terminal, we will do it with this command:

sudo npm install -g ti-inspector

Once the installation is complete the only thing we will need to be able to debug our projects will be navigating to our project’s root folder (the one containing tiapp.xml). And launching this command from there:

ti-inspector

We will have to leave that Terminal running as long as we want to be able to debug so if you need the Terminal to work on other things, please open a new one and don’t close that.


Debug with Google Chrome

With Ti-Inspector running and waiting for our app to shoot a debug session, we will open Chrome and navigate to the following url:

http://localhost:8080

We will see our app appearing there, but won’t be able to do anything with it yet. Last step is easy, use my extended Titanium Build for Sublime building as usual but following this path:

  • ios
  • simulator-debug
  • choose your target device

If we refresh the webpage Chrome is at now, we will see a link there, that is our debug session! just click it and let the fun start, put breakpoints wherever you want and check your variables values as if you were on Titanium Studio but yeah, without being in it! :)


In Closing

Even if this process is quite long, the speed improvements you’ll acquire for your future developments will be quite noticeable and if you come to love Sublime as much as I do you will find it totally worth it. In any case I hope you enjoyed the read and find something useful in it.

Cheers.

25 thoughts on “Tutorial: Sublime Text for Titanium & Platino (Code + Build + Debug)

  1. Pingback: Titanium Alloy optimized Sublime Text 2 Layout | With Titanium

  2. Bug : “env: node: No such file or directory”

    After create symbol link of node to /usr/bin, It’ll work properly.

    sudo ln -s /usr/local/bin/node /usr/bin/node

  3. Hi,

    great post on getting Titanium humming with Sublime Text. I’ve got projects building without issue but I’m not seeing any output Ti.API.info(“blah”) in the console. Were you able to get this working?

  4. Hey. Thanks for this AWESOME write up. I’m anxious to ditch Studio and start writing code in ST2. I have followed everything closely but am stuck on one thing. when I try to BUILD and app within ST I get this error:

    [ERROR] “build” is an unrecognized command.

    Any ideas why? I have Node.js, alloy and titanium all installed. Any help is greatly appreciated.

  5. Hey now! I got it working. I think what did it was the active SDK was 3.1.3 but I think I needed it to be 3.1.4.v20131008163742 which I installed to fix some mavericks bugs. So I ran

    sdk select 3.1.4.v20131008163742 to set the active SDK and running build worked. This is so great. Looking forward to leaving TiStudio in the dust! Thanks again.

    • Hello all,

      I also cannot build from ST2 as it says “unrecognized command.”

      Where do I select the sdk? Or how do I go about in doing so?

      Thank you for your help.

      • Could it have something to do with the “adding an external module” step? I didn’t understand that part. I navigated to Library>Application Support>Titanium>…>iPhone but didn’t know what to put there.

        • Adding an external module is not mandatory, just for ones that need it, I made it mainly for people starting with Platino for Titanium.

          You should check wich Titanium version is the CLI using with this terminal command:

          titanium sdk

          If you find the active one to be different than what you are using in your project’s tiapp.xml, you can change what’s the active with:

          titanium sdk select 3.1.1.GA

          Notice “3.1.1.GA” is the one I am using, could be another one for you.

          With tiapp.xml and CLI matching perfectly it shoould work ok.

  6. After a few days of playing around with developing Ti apps within sublime text. It’s so damn awesome. A completely different experience. So much faster and cleaner. I’m a happy boy! thanks again.

  7. For “No such file or directory” error:
    You need to change the first line in /Titanium Build/Titanium.sublime-setttings to: “titaniumCLI”: “/usr/local/bin/titanium”. (Beware not miss the /local folder).

  8. Pingback: Tools used for Development with Titanium Appcelerator | Biotelligent

  9. Pingback: Sublime Text Tips & Tricks – Syntacticsugar.nl | Syntacticsugar.nl

Leave a Reply