Using Mozilla's Mortar and App stub for Firefox OS apps
How to use Mozilla Mortar and App stub for bootstrapping
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
Think of Mortar as a really quick way of hitting the ground running whenever you first start building a Firefox OS application. It is essentially 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.
- 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!