MDN wants to learn about developers like you:

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Para ajudar você a começar a escrever aplicações web rapidamente, nós fornecemos alguns modelos que possuem várias configurações. Cada modelo é um projeto web estático com ferramentas para ajudar o desenvolvimento e a implantação.

What you get:

  • Uma estrutura mínima e bem formada de HTML
  • Um manifest.webapp pré-construído
  • Bibliotecas JavaScript para interação com o Marketplace
  • require.js para a estruturação do seu código JavaScript
  • volo para a automatização local do desenvolvimento e da implantação
  • Layouts pré-construídos (de alguns modelos)

Você pode visualizar todos os modelos disponíveis no repositório mortar. Os seguintes estão disponíveis:

  • 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 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.

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 require('mylib')

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.

Note: volo itself only has a few built-in commands. The app template provides the serve, build, 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.

Etiquetas do documento e colaboradores

 Colaboradores desta página: AntonioLadeia
 Última atualização por: AntonioLadeia,