Notas de un Peregrino
Contact

Introduction to Boot 2 Gecko / Gaia development

I've been wanting to do some development in B2G/Gaia since it was announced at the Mobile World Congress. The idea of being able to code an app only with web technologies, or customize the UI the way I wanted without having to learn a new language was just too much appealing.

Weeks passed by and I couldn't make the time to start tinkering with B2G/Gaia, until last weekend that I finally sat down and got it up and running.

In this post I will cover how to install B2G Desktop, while in a follow up I'll talk about coding Apps for Gaia. After performing the steps mentioned here you should end up with a functioning Gaia, allowing you to try the pre-installed apps.

Building B2G and flashing it to a supported phone is a complete different process. It requires technical knowledge about flashing phones and is a much more risky process, so I won't cover it here.

Getting Started

The first questions one asks when trying to learn how to start coding apps for this devices are:

B2G Logo
  1. What do I have to learn?
  2. How do I test my code, without the actual phone?

The first one is easy enough to answer: If you know how to code webpages, you're ready to go. That's it, you don't need to know anything new besides some HTML5, in case you haven't got the time to learn it yet.

The other one... needs a bit more understanding. First you need to know what are you going to work with: B2G is the platform running in the phone, and Gaia is the UI the user sees. Pretty much the same as the Linux Kernel and Gnome. Once you get this, the road is much more clear.

Preparing the stack

This is the most complicated part of the process. If you never had any previous experience compiling software you shouldn't be afraid, but be ready for some exciting new experiences.

Although bug 744008 was opened so builds are created on Mozilla's servers, for the time being you have only two choices: compile B2G yourself, or use Nightly.

The list below will give you some help trying to know what to do based on your previous experiences:

  • I use Windows:

    Even though I would like everyone working with B2G/Gaia, right now the only option for people using Windows is to run a Linux VM and working from there

  • I have never compiled software:

    Skip to Using Nightly for development

  • I am comfortable with building software/have built firefox previously:

    Keep reading!

Building B2G

B2G is, roughly speaking, just a different way to compile Firefox. So, if you've never compiled Firefox, first look at this guide to get started. Once you have everything ready to compile Firefox, use the following as your .mozconfig:

mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/obj-b2g-dbg

ac_add_options --enable-application=b2g
ac_add_options --disable-libjpeg-turbo

# This option is required if you want to be able to run Gaia's tests
ac_add_options --enable-tests

Then just compile by running make:

make -f client.mk build

Notes:

  • Even though you can have more than one .mozconfig file if you use some environment variable, that didn't work out so good. The safest bet is to just have them with different names and then rename the one you want to use to .mozconfig before running make.

  • If you're reusing an old checkout in which you previously built Firefox, and get an error like this one:

    make[8]: *** No rule to make target \`../../../xpcom/idl-parser/xpidllex.py', needed by \`libs'.  Stop.
    

delete all the pyc files in idl-parser that might have been built by a previous compile:

$ rm $srcdir/xpcom/idl-parser/*.pyc
  • If you are running OSX Lion (10.7) there might be some rough edges if you installed the smaller Command Line Tools instead of the full XCode. In case something is not working for you, send me a note on twitter

  • The obj-b2g-dbg directory will be ~1.5Gb, while the directory in which the checkout is will end up spanning ~3Gb. Also beware that it's a slow process, in a somehwat powerful machine (8Gb Ram, Intel i7, SSD) it wont take less than 25min.

Using Nightly for development

In case you never compiled some big piece of software (like Firefox), and don't want to start doing it right now, you can just use Firefox Nightly instead of B2G Desktop. Only mind the following:

Pros

  • You don't have to compile a thing.
  • Gets updated by itself
  • You can use the DevTools to inspect and debug Gaia

Cons

  • Gaia doesn't behave as it would in B2G. For example, applications open in a new tab instead of opening in an iframe. Expect some behavior changes.
  • Not everything might be working. Many features are disabled by preferences that are not set in Nightly, and others have landed in B2G but are still waiting for a proper place to land in Firefox, so they can't be used.

Weight the Pros and Cons and decide what you sould do.

Building Gaia

This is required even if you don't compile B2G, but Don't Panic! it's not hard to do.

First, clone the repo from github using git:

git clone https://github.com/andreasgal/gaia gaia

Run make from inside the gaia folder to compile it:

DEBUG=1 make

The DEBUG=1 flag is to create a local server to serve the apps from and not having to deal with Apache configurations

Running Gaia

B2G Desktop Running on OSX

Once you have everything ready, it's time to run Gaia and see it in action.

If you compiled B2G Desktop, run this to start gaia:

$ MOZ_OBJDIR/dist/bin/b2g -profile GAIA/profile

If you're running OSX, use this instead:

$ MOZ_OBJDIR/dist/B2G.app/Contents/MacOS/b2g -profile GAIA/profile

If you are using Nightly, run this to start gaia:

$ /Applications/FirefoxNightly.app/Contents/MacOS/firefox -profile GAIA/profile

Or wherever your Nightly binnary is

Some considerations:

  • GAIA is the folder where you cloned the gaia source code.

  • MOZ_OBJDIR is the directory in which the make process put all the resulting files. Using the .mozconfig that is pasted here, that directory should be named obj-b2g-dbg

  • If you add the flag -jsconsole at the end of the command to start Gaia with B2G Desktop, it will start with the error console opened. This is handy for debugging.

 

Do you have any comments, corrections? Send me a reply on twitter to @peregrinogris