Phone gap on a locally hosted server

Mark and I worked together today, and the aim was to get the camera working in the app, using code on the server.

  • Putting the phone gap javascript libraries (cordova_1.6.0.js) on the server was no problem.  We created a file camera.js on the server too and included it using the <script … src=’camera.js’></script> construct. We also had to remove all javascript from the index.html file in Xcode – somehow the code on the server was calling those routines in preference to the same-named routines on the server.  The on-success routine was getting properly called at one point in the day but somehow this stopped working by the end of the day.  We also have yet to work out how to use the resulting image. Any ideas?
  • I learned that Chrome has a “javascript console” which comes in handy for debugging!  Does Safari have one?

We also decided to host a local version of the server on my Mac, to streamline testing.  It was getting a bit cumbersome to use Filezilla to transfer changes to the server code back to the server every time we wanted to test a bug.  This was pretty tricky to get working with phone gap, so here’s a summary of how we did it:

  • We downloaded MAMP (Macintosh, Apache, PHP and MySQL packaged together).
  • We then needed to transfer both the server web pages and the server database to my Mac, and then point the local copy of the web pages and the phone gap shell to the local host.
  • Go to the server’s phpMyAdmin and export the relevant database.  We found that gzipping it did not work, but zipping it did.
  • On the MAMP local host homepage (localhost:8888) there is a link to phpMyAdmin, where you can import the above file.
  • MAMP looks for the webpages at Applications/MAMP/htdocs by default.  We chose to put all our local copy of the server webpages there (though in retrospect I should probably have put them in a subdirectory), and then add a new project in Eclipse using existing files in that directory (though the workspace remains elsewhere).
  • Note that files that start with a dot, like .htaccess, do not display by default in the Finder, so when copying files around, they can get left behind. I needed to recopy .htaccess into the htdocs directory.
  • In our local webpages, we changed the mysql_connect statement to use localhost:8889, with user root and password root.  Obviously we will not put this change on the server.
  • To run this on a physical device (whether it’s a phone gap app or a regular objective-c app), we cannot refer to ‘localhost’ but the actual local IP address. We looked this up in the terminal (although it is also in the System Preferences -> Network, or you can search the Mac for Network Utilities – it is not the same as you find at and added it to the whitelist, and referred to it in the source code instead of  To complicate matters, this address has changed for me over time.

Voila!  Dinner is ready, so I must end there.


One thought on “Phone gap on a locally hosted server”

  1. For your MAMP setup you could store the websites in another directory, preferably in a ~/sites directory so that they can be backed up etc.You then have to set up virtual hosts for MAMP so that it can find the site OK. Google around to find out how to do that. You don’t need to buy the pro version to get these features.

    Whilst you are doing this you may as well edit /etc/hosts to give your site a nice domain. eg. mysite.loc. The virtual host you set up can then use that.

    The .htaccess gotcha is annoying. It is possible to show dot files in the finder by default on OSX – I think that this will work

    Bookmark that phpmyadmin url :) You’ll probably be in there quite frequently. A lot of mac devs use apparently as a client for mysql.



Comments are closed.