Run Your Apache Cordova App on the Apache Ripple Emulator

Article
05/22/2015

In Visual Studio 2013, the Cordova tools are released as a preview (CTP) version. Cordova tools will be released as part of Visual Studio 2015 and we recommend that you now use Visual Studio 2015 RC to develop apps using Visual Studio Tools for Apache Cordova. You can download Visual Studio from the Microsoft Download Center.

The Apache Ripple emulator runs as a web app inside a browser (Google Chrome). In Cordova, it can be used to simulate your app on a number of devices and platforms and provides basic support for core Cordova plugins like Geolocation and Device Orientation.

The Ripple emulator provides a quick and easy first step in authoring and validating your app for Android and iOS, because both platforms use a browser with a similar code base. The Ripple emulator is particularly useful for validating layout and CSS code. For higher fidelity emulation that’s specific to a platform, use the Android or iOS emulators or an actual device.

Warning

Ripple doesn’t provide a complete emulation of Cordova APIs or native device capabilities, nor does it emulate specific versions of the browser used by your app on a particular device platform.

Here are a few things to keep in mind when testing layout using Ripple.

If you target Android 4.4 or later (Chromium-based browser), support for current CSS standards and other web technologies is better. See caniuse.com for specific information on supported features.
If you target iOS or Android versions before 4.4, the browser is WebKit-based. (The Ripple Emulator, which uses the installed version of Chrome, behaves more like Android 4.4.) Some WebKit browser behavior is different. For example, WebKit browsers don't provide consistent support for vw and vh units.

Run your app on the Apache Ripple emulator

The following procedure shows you how to run your app on the emulator and attach the debugger.

To run your app on the Ripple emulator

Choose Android or iOS from the Solution Platforms list.

Note

If you don’t see this list, choose Solution Platforms from the Add/Remove Buttons list to display it.
In the list of target devices, choose one of the Ripple emulators.
Press F5 to start debugging, or Shift+F5 to start your app without debugging.

Tip

If you get an error that indicates you need to install a new version of the Android SDK, use the Android SDK Manager to install it. On Windows, the SDK Manager.exe is installed in the following location: %localappdata%\Android\android-sdk (for example, C:\Users\user\AppData\Local\Android\android-sdk).

Change the proxy for the emulator

Ripple avoids cross-domain limitations in the browser by using a proxy. Two proxies are available: a remote proxy and a local proxy. The remote proxy is cloud-hosted.

Security Note
If your app is transfering sensitive data (for example, Active Directory authentication tokens), we strongly recommend using the local proxy instead of the remote proxy.

To change the proxy

In Chrome, while your app is running, choose the arrow button on the right, and then choose the Settings section.
Choose the Cross Domain Proxy button, and then choose a proxy.

Change the device while running the app

You can change the target device on the fly while your app is running in Chrome. By doing this, you can avoid restarting the app in Visual Studio.

To change the device

While your app is running in Chrome, choose the arrow button on the left, and then choose the Devices section.
Choose the button that specifies the name of the current device, and then choose a different device.

Download the tools Get the Visual Studio Tools for Apache Cordova or learn more