How to use the Phonegap Developer App

The Phonegap Developer app just recently hit the app stores, and it’s awesome!

This app basically allows you to see any changes you make update in real time on your device. For example, if you fire up a Phonegap project called MyApp through the developer app, and make a change in MyApp/www/index.html, you will see that change on your device when you save index.html.

This saves you from having to rebuild and reinstall the app every time you make a change.

I’m going to show you how to install and use it in this post. (If you didn’t see the release post, check it out here.)

1. Install or update Phonegap CLI

If you don’t have the Phonegap CLI tools, you will need them. Run this command in terminal:

$ sudo npm install -g phonegap

Noob note: don’t paste the $

If you are using an older version of the cli tools, you can update with this command:

$ sudo npm update -g phonegap

2. Install the PhoneGap Developer App

3. Create or open an app

I don’t have anything to add here, this is straight from the Phonegap post.

$ phonegap create my-app
$ cd my-app/

Or open an existing app:

$ cd ~/Development/app/my-existing-app

4. Pair the CLI and Developer App

This is where it gets a little tricky. Make sure you are in your project folder, then run this command:

$ phonegap serve

It will show you something like this:

[phonegap] starting app server...
[phonegap] listening on 192.168.1.76:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]

phonegap developer app

Now open the Phonegap Developer app on your device. Click that box in the center with the IP address, and enter the IP address you see in your console.

In this case, it’s 192.168.1.76:3000, so you’d enter that full number in the developer app, and press connect.

That’s it!

Now you can edit your project files as needed, and when you save you will see your changes in real time on your device.

This is a great time saver for Phonegap development, nice work Phonegap Team!


Get more content like this

Get valuable insight on business and money in your inbox once per week.

Posted by Scott

  1. Hi Scott,

    I followed all these steps, my problem is that the Phonegap Developer app is giving me always an (error…time out) and the serve command in the Node.js never upload the project files : it gives me only this

    [phonegap] starting app server…
    [phonegap] listening on 192.168.1.76:3000
    [phonegap]
    [phonegap] ctrl-c to stop the server
    [phonegap]

    and the files is never uploaded, any suggestions!
    Thank you in advance

    Reply

    1. Hi, what you posted is not an error, that means that the developer app is running properly. I’m not sure about the timeout error, sorry!

      Reply

      1. I’m having the same problem Scott is.

        Reply

        1. Sorry – I meant “Bachar”

          Reply

          1. Solved. Problem happens if your computer and device are not on the same network.

  2. I am using Cordova, after navigating into folder
    [Node.js]
    cordova serve
    [Message I got ]
    Static file server running on port (port no.)
    and when I put the address in phonegap developer app, it shows error
    (I am connected to same network )

    Reply

  3. hello,

    is it possible to test it on computer, without plugging devices? something like in this video: https://www.youtube.com/watch?v=k2bBlOZpPmw

    Reply

  4. Hi Scott,

    I’m on Win 8 64-bit. Phonegap is installed and compiling Android apps. But, when I run the phonegap serve command from within the project folder, I’m getting an error.

    error ‘serve’ is not a node C:\Users\….\phonephone.js command. See ‘node C:\Users\….\phonegap.js help’

    Any ideas on what I’m doing wrong.

    Thanks, Rahul

    Reply

    1. Hi Rahul, Phonegap recently released some new documentation on the developer app, you may want to take a look http://docs.phonegap.com/getting-started/2-install-mobile-app/

      Reply

    2. Hi Rahul,

      Try updating phonegap, I was having the same issue:

      npm update -g phonegap

      Reply

  5. Hi Scott,
    I figured it out. I was running an older version of phonegap. Even though I used npm (supposed to install the latest version?), it installed 0.9.4 version of phonegap. I updated phonegap through the npm (now running 5.1.1-0.29.0) and I was good to go.
    Thanks for the help.

    Rahul

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Being a business owner is hard. I'm trying to get better in business and life, enter your email if you want to join me.
Holler Box