AJAX Login

[enricodeleo]

Hi everyone,

I'm working on an app that make a login request via ajax, but I can't make it work when under gapreload. I read that there is a limitation due to the lack of CORS on the pages served with gapreload. Any ideas about how to solve this issue?

[sebastien-p]

Hi,

grunt-gapreload uses the cordova serve command under the hood, it doesn't serve resources on its own.

Can you provide more informations about your setup?

My point is I don't see why you would need to enable CORS for pages served this way because it's only meant for debugging.

I guess you would rather enable CORS on your production server, maybe this website can help.

Please, keep me updated, I'd like to know more about this issue too! 😄

[enricodeleo]

Hi Sebastien and thank you for your reply.
I solved my own issue and I'd like to share why and how in case anyone else would find it useful.

WHY
I don't use gapreload just for debugging purposes, instead I find it very useful for live developing. Thanks to it I can work on my app directly on a real device or emulator and see what happens live, just like I use to when I develop pure web frontend applications but with hardware support and everything cordova provides in general.
I also fire up Weinre so my work never stops and I have to rebuild rarely (just when I add a cordova plugin). In this way I can also test snippets in console and see what happens on the real device then write down what I need. Everything is superfast and enjoyable.

THE PROBLEM
Since cordova whitelist works only when under the file:// protocol, all requests are blocked because cordova serve serves pages from a local ip instead of the default file:// protocol.
As you pointed out, I would need to enable CORS server-side but this isn't often applicable (sometimes because I work on third parties endpoints or simply because I can't enable CORS server-side just because the remote application is not intended to do so).
So how can I continue working on my project with the fashion I love? Do I have to rebuild every time I change something in order to use the file:// protocol?

SOLUTION
After several attempts I decided just to install corsproxy and launch it with corsproxy 0.0.0.0 9292. Now my pc works as proxy with CORS enabled without having to change a line server-side.
For simplicity I set a development variable and pass external endpoints like so:

var DEVELOPMENT = true;
var loginEndPoint = 'awesomewebsite.com/login-ajax';
var devUrl = '192.168.1.196:9292';

request = $http({
      method: 'post',
      url: 'http://' + (DEVELOPMENT ? devUrl : '') + '/' + loginEndPoint,
      withCredentials: true,
      data: {
        user: $scope.login.user, 
        pwd: $scope.login.pwd,
        action: "clientAjaxLogin"
      }
});

etc...
Hope it helps :)

[sebastien-p]

I meant cordova serve is for debugging purposes. GapReload indeed is intended for live developing.

Thank you very much for those details and solution! I'll reference your comment in GapReload README files.

Do you think some kind of corsproxy integration would be possible/useful here?

[enricodeleo]

Thanks go to you :)
As far as I could see I wasn't the only person seeking for a solution for this problem, so I think other people would enjoy such a feature.
In my very case I saved corsproxy as a dev dependency and I was wondering if I would add it to my Gruntfile but I didn't it there as for now.

[sebastien-p]

Then I'll see if what's possible to be done.

Have a nice day!

[enricodeleo]

You too! I'll try to contribute soon about another thing I love: bower + wiredep integration in this flow.

[sebastien-p]

Great! I leave this issue open for now so that I don't forget about it.

[grunnlock]

Hi,
I've followed your discussion and found it really interesting. I'm first a web developer and used to develop using Grunt, Bower and so on.

@sebastien-p: Thanks for your plugin, it's purely awesome!
@enricodeleo: You described your workflow and it follows exactly the one I have when I do front end development, which I'd like to have on mobile development (through Phonegap) as well.
May I please ask you what configuration you use to do so (over the use of corsproxy)?
I've spent the last week building a Grunt process, but I'm not able to develop using a real device with a live reload task.

By advance thanks!

[sebastien-p]

@grunnlock You're very welcome 😄

[enricodeleo]

@grunnlock atm my grunt process is quite simple. I played with bower in order to install the packages in app/ (it is quite dirty cause eventually you'll like to remove all the sources ad minifying all the scripts but it works well during development). Then, I introduced wiredep and attached it to livereload/watch.

Here's my Gruntfile for reference:

/*jshint node:true*/

'use strict';

module.exports = function (grunt) {
  grunt.initConfig({
    watch: {
      gapreload: {
        files: [
          'merges/**/*',
          'www/**/*',
          'bower.json'
        ],
        tasks: ['gapreload-prepare', 'wiredep'],
        options: { livereload: true }
      },
    },
    gapreload: {
      options: {
        cwd: '.',
        platforms: ['android'],
        SERVER_HOST: '192.168.196',
        SERVER_PORT: 8000,
        LIVERELOAD_HOST: '192.168.196',
        LIVERELOAD_PORT: 35732
      }
    },
    wiredep: {
      task: {
        src: [
          'www/**/*.html',
          'www/css/**/*.css'
        ],
        options: {
          ignorePath: '../app/'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-gapreload');
  grunt.loadNpmTasks('grunt-wiredep');
};

and my .bowerrc

{
  "directory": "app/bower_components/"
}

[grunnlock]

@sebastien-p: you'e welcome!
@enricodeleo: thanks for that! I use kind of the same grunt process. Sorry if my question wasn't clear, basically I'm wondering how

[grunnlock]

You connect your phone (win the app running on it) with the live reload functionality?

[enricodeleo]

@grunnlock you don't have to. The page refreshes automatically since gapreload basically spawns the web page generated by cordova serve into your app frame so it refreshes just like it would do in a common browser. Let me know if I've been unclear (very likely I guess :))

[grunnlock]

@enricodeleo: Oh ok! Sorry, I'm really new at Phonegap development and over my experimentations I didn't realize it could become that close to web develoemt process.
If I understand well 192.168.196 is the IP address of your computer, where the Cordova server runs (through cordova serve), and emulating that app on your real device with GapReload automatically connect the phone on this server (and so is able to refresh after any specified file change)?
Thank you very much for your help so far!

[sebastien-p]

@grunnlock Yes, GapReload's source code is actually quite simple. The most notable thing the plugin does is to redirect your whole app to the cordova serve'd code and inject the LiveReload script which does all the browser-refreshing work. The only thing that differs from standard Web development here is the need to call cordova prepare when a file has changed to make sure cordova serve actually serves its latest version. This Grunt plugin makes use of both the tools mentioned above and is primarily intended to Windows users (because LiveReload is a Mac app).

[enricodeleo]

@grunnlock don't worry, we're here to help! Yes, you're right the process is what you mentioned. It works well both for real devices (although I suggest to disable the automatic sleep of your device) and emulators like the very good Genimotion.

@sebastien-p I'll suggest not to use the Mac app even under OS X. The Grunt plugin is way more handy!

[grunnlock]

Thank you very much to both of you for your help!

@sebastien-p: I'm now making a Grunt template project using GapReload, I'm still getting the error "Required config property "exec.gapreload-add" missing." when I use the command grunt gapreload but I've no doubt it will work at the end!