Edit: As I find more things, I'll post them to the bottom of this blog post.
For folks who have seen me present on PhoneGap/Cordova, you know I'm a huge fan of Ripple. Ripple was (is, see details) a Chrome extension that allows you to run PhoneGap/Cordova applications in the browser. Ripple included a UI that gave you a pseudo-mobile view of your application and a way to emulate various features including the camera and the accelerometer. While not as good as a real device, it was incredibly useful for development.
Unfortunately, sometime around the PhoneGap 2.6 timeframe, something went wrong. Whether it be a Chrome issue or something different in PhoneGap, Ripple stopped working properly. For the last few months, a new developer, Gord Tanner, has been working on an update to the Ripple project at Apache. Previously, Ripple was a Chrome extension and was managed by some folks from Blackberry. Now you can find Ripple at Apache:http://ripple.incubator.apache.org/.
In this blog post, I'm going to describe how to use Ripple. Please read this carefully. Ripple has changed. It is still very cool, but how you interact with it and PhoneGap has been changed.
First and foremost - you must remove the Ripple Chrome extension if you have it installed. Leaving it installed will conflict with the new Ripple. If you don't know how to do that, simply go to your Chrome Extensions page, find Ripple, and disable or remove it. If you still see the little blue Ripple icon to the right of the URL bar than you haven't done it right.
Next - go to the command line. If you don't have npm, then please install it by installing Node. If you have done anything with PhoneGap or Cordova in 3.0 then you already have this. If not, now is the time to fix it. If you have npm installed, then install ripple-emulator:
npm install -g ripple-emulator
Next, create a new Cordova project. (This should work in PhoneGap too.)
cordova create foo
CD into your new project, add Android as a platform, and prepare it so the files are laid out.
cordova platform add android
(lots of stuff output here...)
cordova prepare
Ok, this is where Ripple acts differently. I mentioned earlier that you needed to remove the old extension. So how do you use Ripple? From the root of your project, you can run the ripple command. You need to tell Ripple where your Android code exists. You can do this by running it from (yourproject)/platforms/android/assets/www or by passing a path argument:
ripple emulate --path platforms/android/assets/www
And just to mix things up a bit - a screenshot from OS X to go with the Windows shots above:
Edit as of 12:14AM - thanks to Jonathan Rowny: You do not need to specify a path. If you do "ripple emulate" in the root, it just plain works.
At this point, Ripple actually fires up Chrome for you and opens it to your application:
And that's it! There's a bit more detail at the project home page. Check it out and let me know if you run into any issues. I've successfully run it now on Windows and OS X.
Additional Notes on Nov 5 (yes, about 30 minutes after I posted): Yes, if you want to use plugins (i.e. any core feature), you still have to install them the normal way even if you are using Ripple. Don't forget that. Secondly - every time you edit your code, you're going to need to re-prepare your project. What I recommend is - use a tab to fire up Ripple and another tab to simply run the prepare. You can even use a Grunt watcher to handle this for you.
Additional Notes on Jan 2, 2014: If you ever launch Ripple and see this in the display: Error: static() root path required (lots more crap beneath) it may be that you only added iOS support to your project and Ripple defaults to an Android device. Just switch to an iOS device and it should remove the error. Obviously if you add Android as a platform as well it will go away.
Additional Notes on Jan 11, 2014: A caveat to the first note. When you edit your code, you do not need to run cordova prepare. Ripple does it for you. But you do need to rerun "ripple emulate" to refire the simulator. If you just reload the browser tab it won't show the latest changes. So you have a choice. You can either keep running "ripple emulate", or do "cordova prepare" in another Terminal tab so you can reload the same tab. (Or use the Grunt task idea.)
Archived Comments
I am using Eclipse IDE to created the phonegap app. I installed the Ripple plugin for my chrome browser. Inside the Ripple I tried to run my application using URL (my 192.168.1.22/myproj/myapp.html) like to that path. I can not able to run got the dialog by means of using the coradova.js inside that file .. how can i run ??
Damo, please read the blog entry. I'm sorry if this sounds rude, but it sounds like you may have completely missed the point of this article where I describe how Ripple has changed.
It's too complicated to run Ripple that way, Ripple as Chrome extension is very useful for quick tests, if you need more, nothing can beat simulators.
I am sorry but I will have to agree with Tien Do. The main advantage of Ripple as a Chrome extension was the simplicity and not having to run it like that. For that we can use netbeans which is much better, also free and now supports cordova.
Manuel, I guess we will have to agree to disagree. It's one command via your terminal versus a button in the UI. The only real issue is the need to re-prepare your Cordova project on file editing, which as I mentioned, can be automated as well.
Please excuse my ignorance but if I'm developing a cross platform PhoneGap application on a Windows machine and using PhoneGap build what does the cli buy me? Currently, I don't have to download any SDKs etc. I just build my app in the www folder, zip it up and upload to PhoneGap build. I don't have any platform specific dependencies. Is there a way to improve this workflow without adding platform specific dependencies?
Not as far as I know. I love the PhoneGap Build service, and still use it even though I have the local SDKs, but at the end of the day, if you are planning on developing for mobile platforms, it makes sense to have the SDKs. Period. Just do it. It's a one time deal (ignoring updates) so there is no reason why you should avoid doing it.
Thanks for the response. I have a Windows machine and a great majority of the users of my mobile app are on ios. I use a friend's Mac to submit to app store via application loader. It feels like overkill to buy a Mac just to use the Application Loader.
The PhoneGap docs read:
To add support or rebuild a project for any platform, you need to run the command-line interface from the same machine that supports the platform's SDK. The CLI supports the following combinations:
iOS (Mac)
If I'm building on a Windows machine and targeting iOS, iOS SDK will not work which in turn means I cannot use the PhoneGap cli. Is that correct?
Hmm, so in your case, it is going to be difficult. So you can definitely use PGB from your Windows machine to create an iOS build. But for quick turn around, that's going to be difficult. As long as you add one platform, you can use Ripple. You can add Android, and do your testing with Ripple. This will NOT be the same as iOS, obviously, but, you can at least do some of your development - and do it quickly as well. You can test out your JS, CSS, etc. Make sense?
Excuse me, but it is not "just" a command line! It is not easy if the developer has only used Adobe's Build and has never installed and configured all the Android SDK developer tools including node.js and cordova. It will face for sure, at least one of the most common errors, either android.bat,java,ant path issues, different SDK versions... in my case, after 4 errors fixed, I almost gave up on this gem:
Checking Android requirements...
Creating android project...
[Error: An error occured during creation of android sub-project. Creating Cordova project for the Android platform:]
I guess I'm just used to the command line now. As far as your issue, to be clear, this is with using cordova platform add, right?
Yes, thanks for the info.
Just wanted to say thanks for this article, it changed my life. I wasn't aware that the Ripple extension was no more, and I couldn't figure out why it wasn't working the way it used to.
"changed my life" - I don't hear that often. :)
Thank you Raymond Camden &, Tien Do . about article is fine. But my doubt is I run my local host with WWW files. Use that path in Google chrome like http://localhost/myphonegapapp/index.html. with out include the phonegap.js as a normal web page it's working. As am try to use ripple tool to test my phonegap functionality . so that i enabled the ripple in my chrome. that time also phonegap features not working .. how to test the phonegap functionality in browser .. But the same working in emulator or real devices. That's No issue. Only question is with out emulator or device possible to test the phonegap app??
Thank you
"so that i enabled the ripple in my chrome"
Again - if you are using the extension you are not reading the article. I told you this before. If the language barrier is an issue than I don't know what else to tell you.
Thanks for the post Raymond. I can reproduce your steps with a cordova project. However, I can't do the same with a phonegap project. Nevermind that I am still confused about the difference (which I know you have addressed before - but still confusing to me).
Anyway, what I did manage to do was the following steps (using PG cli 3.1)
phonegap create foo
cd foo
phonegap build android
>> THEN, edit the created index.html under www and change the include from phonegap.js to cordova.js.
ripple emulate
Seems to work! However, if I don't manually change the phonegap.js to cordova.js the deviceReady event is never fired in the emulator. If you were to try manually to fire the deviceReady event in the ripple emulator it says you need to include cordova.js. Note that I never use a separate "prepare" step in the phonegap-cli version.
Is this the right way to do this for those of us who are using phonegap-cli rather than cordova-cli?
Not sure - I've switched back to the Cordova CLI as it seemed a bit more stable.
Thanks Raymond for this excellent article.
np
Thanks, this really helped me get the emulator working. Before this I was using Coda 2 as it works for a majority of my app. The geolocation wasn't working when testing via Coda nor on my actual device and I really needed the emulator to help me figure out the problem.
One this I've found with Ripple is that a service which requires specific request headers to be set may not work correctly. In my case this was an issue as I retrieve some user data from Parse.com. I'm using their Javascript library (https://parse.com/docs/api_... but when I make a request I get this in the console:
Failed to load resource: the server responded with a status of 401 (Unauthorized) https://rippleapi.herokuapp...
Some of the auth data for Parse requests is set in the request header, but I believe since the request is routed through Heroku these headers are being lost in the process. Something worth keeping in mind I suppose. Fortunately in my case this data was easy to fake locally as a workaround.
I love Parse myself - and I ran into the same issue. There is an easier workaround. Ripple lets you turn off the XHR mirroring feature. Just turn it off when using Parse. Since Parse supports CORS, it will work with Chrome.
FYI (for those who subscribed), I just added a small note to the end of the blog entry.
Why do you suggest using:
ripple emulate --path platforms/android/assets/www
Why not:
ripple emulate --path www
The problem with the first one, is one should really make changes to the www directory during the ripple debugging stage. After that, once you move on to making the ios or android testing change using the prepare/compile command.
In the past, when ripple wasn't working for me, I made the mistake of making changes in the platforms/android/assets/www directory. The problem is that if you use the prepare command, these changes are wiped away. Not fun.
Marc, ensure you've read the *entire* blog entry. It was pointed out that I can leave off the path argument. You still need to use prepare though so it copies the right files over. What I'd do is:
write html
run prepare
rerun ripple emulate
as a way of getting things done. You can use a Grunt task to automate the prepare calls for you (http://www.raymondcamden.co....
I saw that before:
You do not need to specify a path. If you do "ripple emulate" in the root, it just plain works.
But I assume it just runs the android www directory. The point of my comment was not that it runs I need to add the android www path or not, the point was that using the android path seems like the wrong this, because then everytime I change one line of code, I need to rerun prepare.
I've tried running it from the www directory, and it works, though the debugger does complain that it can't find phonegap.js. (does ripple actually need this?)
Afaik, yes, it does need cordova.js. Let me do a quick test though.
So yes - this doesn't work well at all. First, you *can* tell Ripple to use the www path and it will load it, but w/o cordova.js, it won't fire anything. If you try to fake it using the Event firing UI in Ripple, even it recognizes there is no cordova.js.
Could you copy cordova.js from an existing Android project and make it work? Probably. But when you do eventually run cordova prepare, it will copy over cordova.js into other platforms, and that won't be good.
I get that having to do the prepare on file editing is a pain, but you can use Grunt to automate it. See my last comment - I linked to an article on it.
Actually - and I believe someone commented on this already (a bit too busy to scroll up right now), you do *not* have to run cordova prepare. ripple emulate will do this for you. So all you have to do is rerun ripple emulate. Unfortunately you get new tabs.
I find it hard to use this new ripple plugin. For some use-cases it may be nice that is starts its own webserver and serves a directory, but for me it is useless this way :(
I am writing an application with coffeescript and compass by using a yeoman angular scaffolding. It generates a nice Gruntfile which compiles my coffee and scss into a .tmp - Folder, starts a webserver and mounts the app/ and .tmp/ folders into the webserver, because both folders contain files needed to preview the application (js/css in tmp/, images, fonts etc. stay in app/). But this means I cannot use this ripple plugin because I see no way to tell it to mount two folders.
The Gruntfile can of course compile the application into www/, but this includes compile, concatenation, minification, tests... pretty much everything. After that, the www/-Folder contains a ready-to-ship application. This compilation takes about XXX seconds, which means it is a far too long cycle to be used in development.
I am sad that the ripple-plugin cannot be told to focus on its primary task - to run an emulator. I would very much like it to be able to tell it "Look, at localhost:9000 is a webserver running. Go ahead and wrap your emulator around it". That was, in my opinion, the main benefit of the Chrome Plugin - it was just an emulator, nothing more. I could point it at whatever I wanted to, no matter where it came from, and it would just work. The new Ripple, in my opinion, tries to do too much and does not leave me the option to do it in a different way.
Sorry, I forgot to replace the XXX in my previous post with a number. FYI, a complete compile-run with tests takes about 25 sec atm.
@Emilio: I definitely see your point here. Best I can suggest is to maybe post it to the listserv (see "Mailing List" here: http://ripple.incubator.apa... and see if there are any plans for this).
Man, this post saved my life, thanks so much
I was going nuts using the broken Chrome extension
hello Camden,
my version of ripple (0.9.19) does 'android prepare' when I save any file on assets
I called it by using:
cd my-project-root
ripple emulate platforms/android/assets/www/
also, ripple says this on log:
refreshing project (platform: android) ...
Nod - see my comment a few notes above - Ripple seems to be doing the prepare for us - which is nice. I should maybe add that as a note to the blog entry. I'm going to do that now actually.
So I added yet another note - hopefully it makes it clear. You may still want to run "cordova prepare" as it would let you reload your current Ripple tab.
Camden,
Just a reload in the brower is working for me! I don't need to rerun ripple simulate
Yeah, but if you modify www/, you will not see changes (afaik). You need to cordova prepare (or use Grunt). Agree? Or are you seeing differently?
each time I issue a F5 on chrome ripple logs:
refreshing project (platform: android) ...
INFO: Using Browser User Agent (String)
Excuse me, not always. Maybe a bug or a feature, I don't know, I wiil see the ripple code
Looking at the code, every request with '?enableripple=something' will run 'cordova prepare' (if platform is already setted on cookies
============
if (req.query.enableripple && req.staticPlatform) {
console.log('refreshing project (platform: ' + req.staticPlatform + ') ...');
exec('cordova prepare ' + req.staticPlatform, function () {
handle(req, res, next);
});
}
else {
handle(req, res, next);
}
==========
When I issue a F5 seems that not always chrome sends the query string (chrome bug?), but when I press the reload button chrome sends the query string (chrome bug?)
Could you test?
Holy smokes - you're right. cmd+r (same as F5) does a visible reload, but it doesn't *really* reload. If I click the reload button in the UI, it *does* reload. (I mean prepare/reload.)
So this is cool and all - but very unintuitive. I'm going to ping Ripple mailing list to see if this makes sense to anyone.
But - all in all - it is good to know. I'm going to add yet another note to the blog entry (since I assume folks don't read all the comments).
Thank you for writing this article - it was extremely helpful to us!
It's a shame that the original Ripple is no more, as I found it extremely useful and easy to use. Oh well, I fear I shall have to get used to this 'new' way of doing things and hope that I find 'Ripple Reborn' just as useful.
Well, be sure to read the comments. It looks like it is nearly as easy as before - just be sure to click the Circle/Refresh/icon thingy in Chrome.
I observed that after closing the tab with the ripple emulator the ripple emulate process keeps going. How do I close it? Ctrl+C or Z do not seem to work. I am on Windows 8.1 using Console2, a wrapper for the classical windows console that allow multiple tabs etc.
I also wanted to say thank you for the knowledge added here in this article. I have wasted 2 days trying to get ripple to work with phonegap 3.3.0. If it wasn't for you I would have never found out that the ripple extension doesn't work with phonegap newer than 3.0. It simply failed a $.ajax() silently. No way I would have realized that it was because of ripple.
Thanks Raymond, I've gone back and read all of the comments now and am looking forward to trying it out.
Ok figured out. I had Ctrl-C assigned as copy.
@Teario Hey, if you're interested...I've modified the source for the Ripple Emulator to allow you to specify a list of hostnames/urls that shouldn't be proxied by the internal proxy. This allows you to use the proxy for all routes that you'd normally want it for, but also let's you get JS SDK's like Parse to work that would otherwise be #$^&ed by the proxy settings that Ripple uses.
@Matt: You going to submit a pull request for that?
An important update folks.
If you are using the VERY latest Cordova, Ripple will fail to see your project as a valid PG project. I looked into the source code and I see that Ripple is looking for a folder called .cordova in your project. This is no longer there. Instead, config.xml is placed in the root. Solutions are:
1) Just make an empty .cordova folder.
2) Use the argument that lets you pick a path and point directly to the platform code.
3) Edit the source code of Ripple like I did to look for config.xml. ;)
For now I'd probably just use 1. I've reached out to the project admin about how I can submit my fix and hopefully we will get this corrected soon.
I also noticed that if you use the npm ripple-emulator package to load your app, make sure to remove and/or disable the ripple chrome extension(if you have it). It will just hang on you.
Ahem - I mention that rather strongly in the post above. ;)
Oh snap! Honestly just raced through the post and replies. Didn't even pick up on it. My apologies.
You should feel bad. I never skim tech docs. Ahem.
I created a default project with phonegap. I entered the project and after I installed ripple I ran ripple emulate. At that point it entered in chrome in ripple emulator but instead the app I got:
Cannot GET /
Why is that?
Look up - about 5 comments.
Thank You! Now its working for a few seconds...
It enters now in chrome in the ripple emulator and it shows the first page but after a few seconds the screen turn red and this message is displayed:
"Looks like what we have here is a failure to... emulate
You're seeing this window because it looks like the zombie apocalypse has started.
For some strange reason it looks like we are unable to load. This could be a problem
with your application, with ours or that you may require more time to finish loading."
Is there any way to also resolve this issue?
Do you get this with the virgin (default) Cordova project?
Yes... And I also noticed that I cannot go to the second page... As if the whole application is blocked on the first page... Why is that?
Do you see anything in the console?
No.. just the regular stuff:
INFO: Server instance running on: http://localhost:4400
INFO: CORS XHR proxy service on: http://localhost:4400/ripple/xhr_proxy
INFO: JSONP XHR proxy service on: http://localhost:4400/ripple/jsonp_xhr_proxy
Cordova 3.0 Project detected...
refreshing project (platform: android) ...
Unfortunately I don't know what to suggest. I'm running the latest Cordova and made a virgin project. I then added a .cordova folder to trick Ripple, started it, and just waited. No error.
Running in latest Chrome too.
At this point your best bet may be to ping the Ripple dev listserv and ask for help.
Hi there. First I'd like to thank you for explaining all this on details. Second what do you mean by "if you want to use plugins (i.e. any core feature), you still have to install them the normal way even if you are using Ripple."? I don't get what's the "normal way" to do so. Could you please tell me? Thanks again!
All features (camera, etc) are built as plugins now and you have to install them. See: http://www.raymondcamden.co...
Some strange behavior on debian wheezy, google-chrome 33, cordova 3.3.1, ripple 0.9.20.
I follow your steps but when I do ripple emulate, it opens 3 tabs ("http://http/", "file:///localhost", "http://0.0.17.48/?enableripple=cordova-3.0.0")
Any ideas?
I've never tested it on a Linux machine. All I can suggest is posting to the dev forums.
Can you tell me what value does emulate.phonegap.com provide in addition to this, if any? That site is unusable without the Ripple plugin. I am confused by what degree of plugin emulation I should expect in either or both. Equivalent?
Oh, and thank you. This article has been invaluable in getting up and running with Ripple.
Speaking as Ray the Web Dude not an employee of Adobe, that site is dead, abandoned. Ignore it.
My android device is broken :( so I was lost trying to test my cordova app using the native sdk emulator -actually, that emulator really sucks-. Then I found your article, I have to do a lot of work: re-install some nodejs extensions or looking for upgrades, add last android version 4.4.* to sdk, edit the PATH windows environment variable, read your directives and try then re-read and try again but finally it works like a charm!
Such a sunday morning! Half time of my work time is left, but it worth the fight
this is great, thank you. Ripple fits in perfectly between basic unit testing and UA testing on a real physical device. I wish the android emulator had the hard menu and back buttons on the emulator itself vs having to fire the events from the drop down. Oh well, gives me something to work on while at sxsw :)
great article saved my life :))
After 5 seconds I got the screen where it says the zombie apocalypse has started and I can either WAIT or FIRE. Both options result in the same screen happening again after a reload.
Also on the same screen, the github link is giving 404.
Do you see anything in the console?
I just start ripple and after 5 seconds it throw the infamous "zombie apocalypse". Is a virgin cordova project and also have the ".cordova" folder, running at Windows 7 Ultimate 64bits with lastest updates. Console doesn't give any error, just "refreshing project (android)"...
A i forget! The Chrome javascript console throws this:
TypeError: Cannot call method 'call' of undefined
http://debug.phonegap.com/t...
Maybe is related to this issue?
Hmm, where did the debug.phonegap.com come from? Are you using that in your code?
@Raymond Camden: I forgot remove the script line from phonegap debug, i'm sorry hehe.. But it still doesn't work. It opens normally and 5 seconds later bang! The red screen.
Ok but what do you see in the console?
Got things set up (installing with npm) and it looks good. However, according to the error dialog I see, "We seem to be missing some stuff", particularly the App.overrideBackbutton. Any wisdom?
Sorry, no, that's not an error I've ever seen. You can post to the dev list.
Hi,
do you know perhaps where are js files are copied. Concretly i'm interest in camera.js file. there is an error in line capture.setAttribute("controls"); ripple.js:49275
regards,
That is a known error. I've file a PR to correct it, but I guess it hasn't been accepted yet. :(
Yes it is an open issue in Jira also (without release date:), but I'm trying to found workaround how to put this fix..
You can run from source - thats how I test when doing fixes. I do a build and then use the command line from the repo.
Yes, that was my intention to, take it from git and build it with jake, but I did't have luck with this approach. I can't install jake cause of instlation bug in jsdom module (http://www.steveworkman.com... doesn't helps). I don't know another approach do you have some other steps how can I do it ?
Sorry no - if Jake isn't working then I wouldn't know what else to do. Really hope my PR is taken soon. On the dev list today I sent a reminder and mentioned that someone else had run into it so I hope they take the time.
Also - the Preview function is broken as well. Previously after you selected the image it gave you a preview. I was going to fix that after this PR was taken in.
I saw your posts to the ripple team, I hope they will confirm your PR soon... Thanks for the information's anyway..
Raymond Camden , i want to test phonegap apps without having any native mobile SDK's installed. I just wana install nodejs and npm, then install ripple then insert a command in terminal and let ripple run my chosen platform with the app. Is this possible ?
Unfortunately, Ripple requires the project folders for iOS/Android. It uses the www source from the respective folders for the web pages displayed. I could see a use case for Ripple just using the core www, but afaik you can't do that with the tool as it stands now.
I'd just install the Android SDK. I mean, at the end of the day, if you are going to be a PG developer, you *need* to get the SDKs. I can totally see avoiding them for most of your dev work, but you *do* need them and I'd just bite the bullet.
Raymond Camden, i will get the various SDK's then and use ripple with them, instead of the cpu hungry emulators they ship with. Thanks for the helpful information!
As just an FYI, the iOS Simulator is *much* quicker. To be fair it isn't doing as much as the Android emulator, but I don't care. It's lightning fast.
@Michael For the "We seem to be missing some stuff", particularly the App.overrideBackbutton" you might want to look into http://stackoverflow.com/qu...
Starting out with ionic framework and that was helpful.
Hello! When I read this tutorial It seemed to be the perfect solution for me, but sadly I had a problem in the very first step. When I run "npm install -g ripple-emulator", I get this error:
[Error: EACCES, mkdir '/usr/local/lib/node_modules/ripple-emulator'
(complicated stuff)
Please try running this command again as root/Administrator.]
Of course I know you know what the problem is, so I'm not asking that. My question is: How can I fix this??.
This would not the first time you help me, so thanks again!!
Run it with sudo?
I knew you'd help. It worked great in PhoneGap, and now it's my turn to work.
Thanks!!
hey ray - regarding the "Cannot GET /" comment from Alex, and your response to look up 5 comments.... apparently I need to create a ".cordova" folder in the project root, however when i try to create a folder of that name OSX tells me that the leading "." is reserved for system stuff - so how exactly would i go about doing that on OSX? I just downloaded phonegap & ripple today so I've got the latest vesions. Am a windows guy so OSX sometimes throws wrenches at me ~ Rick
You can tell OSX to let you create the folder anyway if I remember right - or make it in terminal.
As it stands, making the .cordova folder was a temp work around until my fix had gone live. If you are running the latest, you shouldn't need to do this.
mkdir .cordova reveals that the folder exists, OSX was just hiding it from me.... [edit]delete a lot of text[/edit]
its working now... i'm not sure where I went wrong, i think though i was not in my project root.
Thanks for taking a moment ray! ;)
Ripple is too complicated for me :) any thoughts on where to get started?
Did you follow my guide here? Also try my video - https://www.youtube.com/wat...
Hmm, and why no Windows Phone support? It seems, I need to add Android as a platform although I'm developing in Visual Studio and mostly testing on Windows Phone.
I think it just wasn't a priority due to the # of people who needed it. That being said - this *is* an open source project. :)
Great post ! Saved me a lot of time. Thanks Raymond :D
Greatest post I've seen for a long time.
Very helpful.
Worked like a charm. I'm impressed
One quick question, btw. How difficult is it to add more devices? I'm thinking about a Galaxy S4 or a Nexus 5...
Probably pretty easy - I'd look at the code and submit a PR.
overrideBackbutton issue is fixed since Ripple version 0.9.22
Cool. I'm hoping to get some work done on the Ripple site to help improve documentation so fixes like this are more readily seen.
Hello, when I try to emulate, ripple open browser but appeae an alert with strange code and ripple tells me that has failed and there are apocalypse zombie.Plus consolo show error config.xml not found
Latest ripple? Latest Cordova or PhoneGap version?
Umm... how do you shut the emulator down? Seems if I kill the Chrome window, the service is still running in node, even if I've killed the shell.
Thanks!
...and... after editing the index.html file, the grunt task to refresh kicked in, but then I received
Bus error: 10
Any advice there?
Thanks again for the great posts!
If you ctrl/cmd-c in Terminal it kills it.
Thanks Raymond, it work fine with cordova 3.x. Good tool save me a lot of time.
This may be a stupid question, but does it work for other platforms supported by Phonegap/Cordova, like Windows Phone, FireFox OS and Ubuntu?
Not yet.
RIpple tells me the config.xml could not be found.
Also in the console there is a 404 on the config.xml
i am using:
ripple v 0.9.22
cordova 3.5.0-0.2.4
Cant figure out how to fix this
Don't. Ie, just ignore it.
I have a few errors after following your tutorial. First ripple reports a malformed config.xml doc, even though it's just a plain cordova create application. Second, it's just stuck on
"connecting to device."
Any ideas?
Nevermind, got it working! Just did ripple emulate (was doing ripple emulate www/ earlier) My mistake.
Strange, it seems ripple doesn't recognize the config.xml file. Here's the error:
config.xml file could not be found in the application's root or is malformed XML
That's because config.xml *used* to be in www, now it isn't anymore. This is something Ripple needs to be updated for.
Hello Raymond
Do you have any beginner tutorials for phonegap and ripple. Thank you
Please see this video: https://www.youtube.com/wat...
About the "Cannot GET /" issue.
I do the ripple emulate like this now and I don't get the error anymore:
sencha -sdk <Path>\touch-2.3.1 generate app RippleDemo01 RippleDemo01
cd RippleDemo01
sencha cordova init com.example.RippleDemo01 RippleDemo01
#Edit cordova.local.properties and Change platform to android (in this case)
sencha app build native
cd cordova
cordova prepare android
ripple emulate
Does ripple support Cors?
I have a website on my computer, that does support Cors as far as I understand.
I run it from IISExpress (asp.net MVC web api services)
I do manage to make calls from the Android virtaul simulator.
From ripple I get:
XMLHttpRequest cannot load https://rippleapi.herokuapp.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4400' is therefore not allowed access.
Ripple tries to take over all XHR requests and proxy them so that CORS isnt required, but if it gets in the way, just disable it.
I try disable CORS on server side, and it didn't work.
You mean disable CORS from ripple? How to do?
You suggest to put empty .cordova folder in order to stop config.xml not found.
Where exactly to put? I put it in platforms\android\assets\www, and still get erro.
I also tried to put inside the folder config.xml, but then ripple emulate gives error.
@git: I didn't say to disable CORs, but to do disable the proxy. The option is in the upper right side.
@git: I meant in the root folder. Not platforms\etc, the root folder of your project. But if you are running the latest Ripple then you shouldn't need that.
Excellent!!!
This works with CORS!!
Thanks a lot for the post, and the reply.
This will help me work with phonegap in a sane way and not be exhausted by the AVD.
Really a life saver post.
Hi, thanks for this great news. I followed this tutorial and it works. Just wondering how I can get this to work with Blackberry esp for BB Os 6 and 7
Thanks
Sorry David, I haven't done any BB testing in a long time.
Ripple emulate fires index.html by default.
Is it possible to specify another html file to fire?
Not sure. Most PG apps use index.html by default. Is there a specific reason you don't want to use that?
This way for example I can have a few varieties of the same page and compare between them, for debugging purpose.
I'd probably use different projects. But - no - I don't think Ripple supports this.
Great job on posting this tutorial.
I was working with Ripple extension support version 2.0.0 but I got sick from implementing all workarounds just to make it work in Ripple. What made me move was support for version 3.0.0. and would probably spent most of the day trying to make it work without your tutorial.
Maybe just a few notes:
1. Ajax works fine for me with Cross Domain Proxy disabled
2. "Cannot GET" still appears from time to time. To make it work initially I had to disable Ripple Extension
3. How do you set what browser is started in "ripple emulate" if you don't want to use the default one?
4. "cordova prepare" fails from time to time when refreshing by clicking refresh button in Chrome browser (it is logged in red). At the moment I don't remember the exact error but it is something about cordova not being installed, strange anyhow.
Great job, saved me a lot of time.
3) It remembers the last - so if you pick phone X, the next time you fire up it should use that one.
Thanks Raymond Camden. You saved my day. i was just about to pull out my hairs and then I found your blog. I am using VS2013 professional with CTP tool installed and I was expecting them to set up my environment without me doing anything but I was wrong and so wrong that I ended up installing each module manually via npm and installed ripple the way you have mentioned and got it working all together.
Thanks once again for your contribution.
Does ripple support plugins?
I tried to use file transfer, and got error.
Camera did work.
This discussion also says it does't support file transfer:
http://stackoverflow.com/qu...
I haven't tried it under Ripple. Best I can suggest is filing a bug report for it.
Great tutorial hands Ups
I was using ripple emulator as an extension until I noticed it was not anymore working!, left It for phonegap serve and live reload using Phonegap Appon a device.but wasnt quite satisfy and I especially like Ripple because of the GPS routing Simlutor very accurate and with custom GPSX file.
Then I found your article and I came back on Ripple , I also found their go major updates and now it is possible to test plugins like camera , InAppBrowser and others that previously was only possible on the devices.
Great everything is moving on Node with the magic npm.
For me I am using all debugging tools out there for making good apps.
Thanks again from a follower sharing same passion (Ionic,phonegap ,angular and...)
@jeanPokou
Hey,
you wrote that running `ripple emulate` will fire up chrome. It actually doesn't, it fires up the default browser, which makes it a little more inconvenient.
Otherwise great stuff; I love the sensor emulation.
The original chrome ripple extension provided a 'ripple' variable which = true when your .js is running in Ripple. This allowed for some alternate code between running your app in the browser and on a phone. Is there an equivalent variable in this re-vamped version of Ripple, I can't find it?
Thanks
Hmm, I didn't know that. Best I can suggest is that if you don't see it, take a stab at adding it back in (remember Ripple is open source). Or ask on the dev list, maybe it was removed by accident.
Oops, it's an object called 'tinyHippos' which is defined in Ripple and absent on a mobile device. It's still there! Great way to avoid running mobile-only plugin code!
Or use the Browser platform. :)
Thanks for the fast reply!...I have noticed that Ripple seems to be loading all my plugin .js files and erroring since their native counterpart code is obiviously missing:
eg in the Chrome debug console I see:
missing exec: StatusBar._ready
missing exec: Console.logLevel
Is this intended functionality or am I missing something?
Honestly I don't know - best bet is to hit that dev list. Sorry I keep saying that, but it is the best place for technical questions about Ripple. Lately I haven't really used Ripple that much.
Thanks again for an informative post Raymond. I was merrily plugging away on the Chrome extension without realising there was a newer option.
I gave the new version a try but to be honest I decided against it. The Chrome extension is easier for me and still works pretty well for basic debugging and using the tinyHippos variable mentioned in an earlier comment lets me work around one or two minor issues.
Now that Chrome supports remote debugging on the android emulator/ devices I think I dont need this.
You mentioned you havent used Ripple for a while. Is there something else you are using?
Cheers, and thanks for the posts!
I'm doing more w/ Chrome/Safari Remote debug, especially via GapDebug. When doing Ionic I'll use their console to terminal thing since it is so darn convenient. And now Cordova supports a "Browser" platform which is like Ripple light, but gets the job done.
Thanks.
Any idea how to make the network plugin works? Its not loaded by ripple so i cannot test what happen to the application if network is down. Any idea?
You got me - haven't used Ripple in ages.
what are you using now?
anyway i found a solution. upgraded from cordova 5.x to 5.1.1 and did cordova platform update now i've the network plugin working... and maybe the google analytics one too :)
Either ionic serve or I just use the ios emulator since it is so fast.
I cannot install add on Ripple Emulator on chrome.
Please see here: http://ripple.incubator.apa...
You might want to look in to Visual Studio Tools for Apache Cordova. It sets up the whole thing for you. There s more info here:
visualstudio.com/en-us/feat...
hi,
i am trying to run project on ripple emulator in osx but it seems to be not working getting this error :Cannot GET /platforms/ios/www/index.html and i am using this url :http://localhost:4400/platforms/ios/www/index.html?enableripple=cordova-3.0.0
You using the latest?
cordova v5.4.1 and ripple v0.9.32
Sorry for the delay in responding - unfortunately I do not have much to suggest now. Did you add the ios platform? If not - add it. If you are Windows getting this - try switching Ripple to use Android.
I'm using Ubuntu 15.10 and the latest version of NodeJs and NPM.
If I type this [ ripple emulate --path stringPath ] it doesn't work and the ripple device shows this message [ Cannot GET ]. But when I type just [ ripple emulate ] it works perfectly.
Sorry - not sure what to say about that. I haven't used Ripple in about a year.
Hi, I ran into some trouble from one day to another: "Ripple Cordova Chrome “aw snap” message when plugin Media is part of the project".
Here are the details of my analysis regarding that topic: http://stackoverflow.com/qu...
If you have a better solution to propose, I'd be grateful.
I'd try the Browser platform for testing.
Thanks Raymond, but have already running app on ripple in windows OS in android platform, now i want to run it on MAC OS in ios platform.Now i am first developing in android and at last will copy code to ios platform.
Not quite sure what your saying here. Sounds like maybe you are ok? If there is a question, please rephrase it.
in your console on root app folder, try to run this line:
ripple emulate android
I guess the cordova change structure when you create a new app.
There is a folder www/ in the root app directory and there is a folder platforms/android/assets/www.
I have tested something in index.html from platforms/android/assets/www/ , but when i change to other devices, the index.html reset same the index.html in root www/ directory.
So, we should run command : ripple emulate android/ios instead of.
my ripple is not showing my index.html dont no the problem
Sorry - I haven't used this in years.
Hi Please can I know the size in mb ofripple
No idea - haven't used this since 2013.
According to the Apache site, it was retired in 2015. Don't use it.