Using Ripple for Mobile Emulation with Cordova/PhoneGap

Using Ripple for Mobile Emulation with Cordova/PhoneGap
Apache Ripple™ is a web based mobile environment simulator designed to enable rapid development of
mobile web applications for various web application frameworks, such as Apache Cordova. It can be
paired with current web based mobile development workflows to decrease time spent developing and
testing on real devices and/or simulators.
Ripple is a Chrome extension that allows you to run PhoneGap/Cordova applications in the browser.
Ripple includes a UI which provides a pseudo-mobile view of your application and a way to emulate
various features including the camera and the accelerometer.
Installing Ripple
First, if you already have the Ripple Chrome extension installed, you must remove it. Leaving it installed will
conflict with the new Ripple installation. If you don't know how to remove a Chrome extension, simply go to
your Chrome Extensions page, find Ripple, and disable or remove it.
Next, from a command prompt (terminal window), enter the following command:
npm install -g ripple-emulator
You’ll see output similar to the images below:
Using Ripple for Mobile Emulation with Cordova/PhoneGap
1
To emulate your application in Ripple, from your application’s root directory, run the following command in
a terminal window:
ripple emulate --path platforms/android/assets/www
INFO:
INFO:
INFO:
INFO:
Server instance running on: http://localhost:4400
CORS XHR proxy service on: http://localhost:4400/ripple/xhr_proxy
JSONP XHR proxy service on: http://localhost:4400/ripple/jsonp_xhr_proxy
Using Browser User Agent (String)
Your application will appear in a Chrome browser tab.
As an option, you can change to the www directory and run “ripple emulate”. First, from your
application’s root directory, change to the www directory:
cd platforms\android\assets\www
Then run Ripple:
ripple emulate
Note: Recommendation is to have two terminal windows open so you can run “cordova prepare” after
any code changes.
Using Ripple for Mobile Emulation with Cordova/PhoneGap
2
Additional Notes
If you want to use Cordova plugins (i.e. any core feature), you still have to install them the normal way
even if you are using Ripple.
When you edit/change your code, you do not need to run “cordova prepare” as Ripple handles that
for you. But you do need to rerun "ripple emulate" to restart the emulator. If you just reload the
browser tab, Ripple won't show the latest changes. So you have a choice, keep running "ripple
emulate", or do "cordova prepare" in another Terminal tab so you can reload the same tab.
If you launch Ripple and encounter this error “display: Error: static() root path required”, it’s likely the
result of adding iOS support to your project and not choosing an iOS device to emulate (Ripple defaults to
an Android device). Switch to an iOS device and it should resolve the error. Same holds true if you add
Android as a platform.
Depending on your version of Ripple, it may fail to see your project as a valid PhoneGap/Cordova project.
Ripple is looking for a folder called .cordova in your project directory, which is no longer there. Instead,
config.xml is placed in the root. The quick fix is to create an empty .cordova folder.
However, it appears the latest version of Ripple (0.9.20) has resolved the issue.
Using Ripple for Mobile Emulation with Cordova/PhoneGap
3
Here’s the command syntax for Ripple:
# Synopsis
ripple command [options]
# Commands
emulate
proxy
version
help [command]
Starts up a web server in the current or provided directory
Starts up a copy of the ripple proxy
Display the package version
Displays help for the given command
# Example usage
cd app
ripple emulate
# Synopsis
ripple emulate [--port xxxx] [--path xxxx] [--remote xxxx] [--route xxxx]
# Description
Boot a ripple server instance to test your application on. This will
do various things, such as statically host your app, and bind any
ripple services (xhr proxy, etc) to a specific route (see --route).
# Arguments
--port
The port to host the application on (defaults to 4400)
--path
App path to statically serve for testing (if omitted, the current working dir
ectory will be used)
--remote
Instead of a local path, you can specify a remote website to load and emulate
--route
Specify the URL path on which ripple services will run (defaults to '/ripple)
example: http://localhost:1234/ripple/xhr_proxy
# Example usage
ripple emulate --port 1234 --path path/to/my/application/root
ripple emulate --remote http://google.com
Using Ripple for Mobile Emulation with Cordova/PhoneGap
4

Download Report