Using App templates

What you get:

• A minimal and well-formed HTML structure
• Prebuilt manifest.webapp
• JavaScript libraries for interacting with the Marketplace
• require.js for structuring your JavaScript code
• volo for automating local development and deployment
• pre-built layouts (from some of the templates)

You can view all of the available templates in the mortar repo. The following are available:

• mortar-app-stub: a blank template that comes only with the basic things required to get started
• mortar-list-detail: comes with a layouts library and sets up a list-detail layout for you
• mortar-game-stub: a minimal web game template that handles input and a render loop

Starting with the App Stub Template

You could simply use git to get the template from this repo:

git clone https://github.com/mozilla/mortar-app-stub.git myapp

Using volo is recommended, however. volo is a tool for automating projects, and you'll be able to use it with good effect with this template, so go ahead and install it. You first need node.js, which you can download from here. Once you have node, install volo (you might need to prefix the command with sudo if it fails due to insufficient permissions):

npm install -g volo

Now you can just use the volo create command, followed a name for the folder you want your app created in, then mozilla/ followed by the name of the mortar template you want to use:

volo create myapp mozilla/mortar-app-stub

When future templates are available, you can use the same create command with different template URLs.

What Now?

All your HTML, CSS, and JavaScript are under the www directory, so start coding! You'll see a bunch of stuff in there, but feel free to remove anything you don't need.

The template uses require.js to manage JavaScript. If you look in www/js/app.js you'll see that it defines the main module and loads a few libraries like zepto. The Marketplace JavaScript library is also included, which enables in-app payments and receipt verification. You don't need this if you're a free app without in-app payments.

Below that, you'll see the line:

define(function(require) {

That defines the main module for your app, and you should start coding within the function. You can use require to load in other modules, the same way zepto is loaded. Check out the require.js API to learn more about modules.

You can edit CSS in www/css/app.css. Typically you should @import additional CSS files at the top of this file instead of using the <link> tag to include them. This allows the volo optimizer to inline all the CSS when building for deploying.

Finally, volo provides several helpful commands that you can use:

$ volo serve         # Fire up a local development server
$ volo add <library> # Add the JavaScript library
$ volo build         # Build an optimized version of the app into www-built
$ volo ghdeploy      # Deploy the built version to github (need to build first) 

All of these must be run at the root of your project. There are a few other commands and you can view the full list by simply typing volo.

Tutorial

For more information about this template, see the Weather App Tutorial which shows you step-by-step how to build a weather app with this template. It dives into the volo commands more specifically and explains the template in more detail.