TiShadow – a quick guide

Posted on

Titanium speeds up your cross platform development, no question. But whereas Xcode builds and runs your application in the simulator within seconds (sometimes a few seconds more), it often takes minutes to do so with Titanium. This is especially painful when working on the UI, whenever you want to check the adjustments you made, you have to build and run. Moving a button a few dots to the right can easily take you ten minutes this way.

With TiShadow you can move this button within seconds. TiShadow can do a lot more for you, but this is the feature I will focus on for now. Please note that I will not explain how to download and install node.js or TiShadow, this has been done before and it is well documented on GitHub. This is just quick and dirty for iOS.

To me it was not obvious that you don’t have to change a thing of your existing app. Just follow these simple steps:

  • 1. Run the TiShadow server

    Open a terminal window and type tishadow server.
    Now open your browser and go to http://localhost:3000.
    You should see the TiShadow console now, devices should be empty.

  • 2. Create, build & run the TiShadow app on the simulator

    Now we will create the TiShadow Titanium app. It is a standalone app to connect to the TiShadow server.

    mkdir ~/tishadowapp
    tishadow app -d ~/tishadowapp

    You will be prompted to enter an app id. Choose as you like, it has nothing to do with your existing apps. Your TiShadow app should be ready by now. If you have to make changes in the tiapp.xml, e.g. adding native modules or changing the SDK version, import the TiShadow app in Titanium Studio.

    Now build & run this app. Navigate to the tishadowapp folder and type ti build -p iphone -T simulator

    As soon as your app has started in the simulator, you will be prompted to enter an IP address. Simply type in localhost, TiShadow assumes port 3000 by itself. Hit connect and you should be connected to your local TiShadow server. Switch to your browser, you should now see the IP of your simulator under devices. If not, reload.

  • 3. Build & run your existing app inside the TiShadow app

    Open a new Terminal tab/window. Navigate to the root folder of the Titanium app you want to work on and run it via TiShadow by typing in tishadow run. Switch to your simulator, your own app should now run within the TiShadow app!

  • 4. Push changes to your running app

    If you are working with alloy, you will have to compile your app first by (still in your apps’ root folder) typing alloy compile --config platform=ios

    Now push these updates by typing tishadow run --update

    These two simple steps are required with every change in your app, but compared to a standard Titanium build, this is way faster!

Wait, where’s my console?

Your console output will be displayed in your browser window, at localhost:3000

TiShadow can’t find module

If you are using native modules in your app (the ones you add to tiapp.xml) you have to add them to the TiShadow app as well!