The cross-platform team at Mozilla is always looking for ways to improve how developers build apps with open web standards. We consider Cordova and PhoneGap to be great tools to achieve that. We are excited to work on improving support for PhoneGap by getting the PhoneGap Developer App into Firefox OS.

The PhoneGap Developer App allows you to easily run PhoneGap apps in multiple platforms, without the need to install SDKs or have a developer subscription. The app is available for Android, iOS and Windows Phone at their respective app stores. You can pair your app with multiple devices at a time and any changes you make to your app’s code get propagated to all devices.

Even though developing for Firefox OS does not require a beefy SDK or a developer subscription, being able to have your changes propagate to multiple devices at once is pretty cool!

We have started working on support for Firefox OS and you can try it out today. In this post we’re going through the steps needed to get the preview version of the PhoneGap developer app in Firefox OS. As they say, a video is worth 1k images:

Getting the dependencies

We will be using a development version of Cordova combined with a development version of the PhoneGap command line interface to get it all working. Luckily, they are very compatible and work well together. You will need to have git, nodejs and npm installed before proceeding.

Let’s first get all modules we’ll need from github:

  $ git clone https://github.com/apache/cordova-firefoxos.git
  $ git clone https://github.com/apache/cordova-cli.git
  $ git clone https://github.com/apache/cordova-lib.git
  $ git clone -b fxos https://github.com/rodms10/phonegap-app-developer.git
  $ git clone -b fxos https://github.com/rodms10/connect-phonegap.git
  $ git clone https://github.com/phonegap/phonegap-cli.git

Now let’s set dependencies up:

  $ cd connect-phonegap
  $ npm link
  $ cd ../phonegap-cli
  $ npm link connect-phonegap
  $ npm install
  $ cd ../cordova-lib/cordova-lib
  $ npm link
  $ cd ../../cordova-cli
  $ npm link cordova-lib
  $ npm install
  $ cd ..

Load the app to your device

The app is available at phonegap-app-developer/platforms/firefoxos/www/, just point the app manager or webIDE to this path and load it to your device or simulator. Once you start the app, you should see a screen with an IP address. That’s where you enter the address of your server.

Starting the server

Let’s get the server going. It will serve your app’s content to the PhoneGap Developer App. Create a new Cordova app:

  $ cordova-cli/bin/cordova create myapp org.app.my "I Heart PhoneGap Dev App"
  $ cd myapp

Now we need to point cordova to the development version of cordova-firefoxos. In your root app folder, myapp in our case, create a folder named .cordova (with the leading dot) and add a file named config.json to the new folder with the following contents:

{
  "lib": {
    "firefoxos": {
      "uri": "/<Full/Path/To>/cordova-firefoxos",
      "version": "dev",
      "id": "cordova-firefoxos-dev"
    }
  }
}

Make sure you have the correct full path to cordova-firefoxos in the uri property above.

Time to start the server, we’ll switch back to PhoneGap for that:

  $ ../phonegap-cli/bin/phonegap.js serve

You should see a line saying [phonegap] listening on 10.0.0.1:3000. Enter that IP in the PhoneGap Developer App and see your app start running there! Easy.

Ship It!

If you got this far, you’re probably asking why isn’t the app in the marketplace already! As you saw, to get all up an running we required the development version of the PhoneGap command line interface. Once a new version with our new code is released, we can publish the app and not require development version of the command line.

If you have any questions leave a comment, find us at the #apps channel on IRC or send us an email at mozilla-cordova@mozilla.org.