To help you start writing web apps quickly, we provide a few templates which has a lot already set up. Each template is a static web project with tools to help build and deploy.
What you get:
- A minimal and well-formed HTML structure
- 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.
www directory, so start coding! You'll see a bunch of stuff in there, but feel free to remove anything you don't need.
Below that, you'll see the line:
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.
Note: By default, modules are loaded from
www/js/lib. If you want to load something from
www/js, which is your working directory, use the syntax
require('./mylib') instead of just
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:
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
Note: volo itself only has a few built-in commands. The app template provides the
ghdeploy, and other commands.
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.