phonegap developer app

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:
[html]$ sudo npm install -g phonegap[/html]
Noob note: don’t paste the $
If you are using an older version of the cli tools, you can update with this command:
[html]$ sudo npm update -g phonegap[/html]

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.
[html]$ phonegap create my-app
$ cd my-app/[/html]
Or open an existing app:
[html]$ cd ~/Development/app/my-existing-app[/html]

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:
[html]$ phonegap serve[/html]
It will show you something like this:
[html][phonegap] starting app server…
[phonegap] listening on 192.168.1.76:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]
[/html]
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!


Posted

in

by

Tags:

Comments

11 responses to “How to use the Phonegap Developer App”

  1. Bachar Avatar
    Bachar

    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

    1. Scott Avatar
      Scott

      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!

      1. Marshall Avatar
        Marshall

        I’m having the same problem Scott is.

        1. Marshall Avatar
          Marshall

          Sorry – I meant “Bachar”

          1. Marshall Avatar
            Marshall

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

  2. Monis Avatar
    Monis

    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 )

  3. MarcinDl Avatar
    MarcinDl

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

  4. Rahul Avatar
    Rahul

    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

    1. Scott Avatar
      Scott

      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/

    2. Daniel Avatar
      Daniel

      Hi Rahul,
      Try updating phonegap, I was having the same issue:
      npm update -g phonegap

  5. Rahul Avatar
    Rahul

    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