Using Mozilla's Mortar and App stub for Firefox OS apps

Sometimes the thing that can put someone off wanting to work on a project is the dreaded blank screen when you start. This is especially true when the thing you are building is relatively new and there haven’t been that many templates created to give you a helping hand.

If you are wanting to get stuck into your first Firefox OS application then an excellent place to start is learning HTML, CSS and JavaScript fundamentals with Mozilla’s Mortar package.

Think of Mortar as a really quick way of hitting the ground running whenever you first start building a Firefox OS application. It is a boiler plate.

The first thing you will need to do is get Node installed, this is out of the scope of this article but if you haven’t already installed it you should, the installation on most setups is very easy and it gives you some awesome power, like for example setting up Firefox OS applications quickly!

Once Node is installed you should install volo, volo is what will be doing all of the heavy lifting for us. You can install this by running npm install -g volo

Now you have the workhorse installed we need to target the boiler plate that volo can read and generate page(s) from. There are a couple of ways to do this but the method I like it to just reference it in one command volo create my_funky_cool_app mozilla/mortar-app-stub.

Once this runs (it will need to download the files associated with mozilla/mortar-app-stub) you will get some boilerplate code generated inside of my_funky_cool_app if you go into it and open www/index.html you will see a big blue install button, that is the boilerplate code at work.

Performing an ls on the www directory will show you all your starter files and folders;

css		
favicon.ico
img		
index.html
js		
manifest.webapp

From top to bottom these files are;

• css - Where your CSS lives.
• favicon.ico - The icon file for your index.html page.
• img - Where your images live including your icon files.
• index.html - The main page of your app.
• js - Where your JavaScript lives.
• manifest.webapp - The meta information about your app.

Hopefully this should help get you up and running and avoid the coders block that can come with a blank file in front of you!