Mozilla

PhoneGap Developer App preview for Firefox OS

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.

9 comments

Comments are now closed.

  1. Anandhamoorthy wrote on September 2nd, 2014 at 10:08:

    All the content are worth, but it’s not clear for newbie. :)

    1. Rodrigo Silveira wrote on September 2nd, 2014 at 10:51:

      Unfortunately at this development stage there are too many steps you have to take to get it all working. Hopefully soon most of them won’t be needed!

  2. Erik wrote on September 2nd, 2014 at 11:34:

    Awesome! I’d love for you guys to work with the Adobe folk and get the firefoxos target added to the PhoneGap Build service as well. That’s my biggest sticking point right now — I suspect I’m not alone.

    1. Adam wrote on September 3rd, 2014 at 07:30:

      Yep you are not alone :)

    2. Rodrigo Silveira wrote on September 3rd, 2014 at 10:23:

      We are working with Adobe on adding Firefox OS support to PhoneGap build. Stay tuned!

      We know it’s a very handy service, even though Firefox OS only uses web technology and our “build” step is just packaging the app in a zip file.

      I’d love to hear more about how you use PG build in your workflow.

  3. Adam wrote on September 2nd, 2014 at 13:17:

    Here is an ealier Mozilla Hacks tutorial on targeting Firefox OS using Cordova: https://hacks.mozilla.org/2014/02/building-cordova-apps-for-firefox-os/

  4. dynamis wrote on September 4th, 2014 at 09:54:

    typo found:

    -$ cd cordova-lib/cordova-lib
    +$ cd ../cordova-lib/cordova-lib

    1. Rodrigo Silveira wrote on September 4th, 2014 at 09:57:

      Thanks! Updated.

  5. aaronraja wrote on September 5th, 2014 at 07:35:

    try to make easy step or procedure its confused and not clear

Comments are closed for this article.