Creating a weather app with templates
This tutorial tells you how to build an example app called weatherme.
We have created the Open Web App Bootstrap templates to help you get started writing an Open Web App. These templates are HTML/CSS/JS projects that are already set up to get you started writing your app quickly.
The code name for the Open Web App Bootstrap templates is Mortar. There are a number of templates available for different types of app, but for our purposes here we'll be using the "app-stub" template. This is a basic template that includes jQuery, require.js, volo, Mozilla Marketplace libraries, and other helpful things.
What you need
- Node.js (needed for volo and other tools described below)
- GitHub account (a free account is enough)
To get started, simply download the template. Alternatively, run this command (git is a GPL licensed source code management system):
$ git clone email@example.com:mozilla/mortar-app-stub.git weatherme
You will also need volo, so if you don't already have it (npm is a utility that comes with node.js):
$ npm install -g volo
Volo is a tool for running tasks for your project so that you can quickly test, optimize, and deploy your code with a single command.
Note: If you already have volo installed and you get an error with volo commands, try getting the latest version of volo.
Ok, now we're ready to code. But wait, where are the HTML/CSS/JS files? Here's what the directory structure looks like:
README.textile package.json tools volofile www
The actual project is inside the
www folder. The other files provide the capability for testing and deploying your code, which we will get to later.
If you look in
www, you will see a lot of stuff there. Most of this came from the HTML5 Boilerplate project, but it has been heavily customized for writing Open Web Apps.
To add HTML code, open up www/index.html. The first thing you should do is set a title and description in the
meta tags, and then add your app's HTML in the
You can see the code that was added for weatherme here. We're using Twitter Bootstrap, so you'll see a navigation element and some buttons.
Let's check the HTML in the browser. Run this command from the root of the project:
$ volo serve
This fires up a simple server on your local computer, and you can see your project by opening http://localhost:8008.
$ volo add underscore
add command finds the project on GitHub and fetches it (you can also pass it a URL). It is now available as a library that we can import with require.js.
You'll see the following statement:
var _ = require('underscore');
<script> tags. There might be a few exceptions, but everything should be imported with
require. This helps modularity, separates concerns, and makes it easy to minimize and concatenate everything for deployment.
Note: jQuery and Twitter Bootstrap were added manually for this specific app
Now, for CSS. Open up
www/css/app.css and you'll see that it imports
defaults.css. Feel free to open up defaults.css and modify the defaults. Since we are using Twitter Bootstrap, uncomment the following line:
That will include the CSS for Twitter Bootstrap components. We don't need the responsive CSS, so we will leave that commented out. When we build the app for deployment, this will all be inlined into a single CSS file.
Write the rest of the CSS for your app in this file. You can view the weatherme CSS here.
And test your app at http://localhost:8008. Time to fix bugs!
Before we deploy, we need to customize
manifest.webapp. Open up the file in
www change the name, description, and other properties. If you're going to host it on github, make sure to set the
launch_path setting to
/<project-name>/ instead of just
volo serve base=www-built
If you want an appcache so that your app can run offline, volo has a command to generate it for you. All you need to do is:
And it will create it in the
www-built directory (building your app if it hasn't been yet). That's it! All of your files will be cached and usable offline.
Lastly, volo has a command for deploying to GitHub. We recommend hosting your app on GitHub because it is easy and stable. You can't do this if you need a server-side component, but if it's all client-side you should use GitHub Pages. Just type:
And volo will create a repo for you if it doesn't exist yet and push to the
gh-pages branch, which tells github to create your page at
<username>.github.com/<project>. You app is now live!
When you make future changes, you must first build your app (
volo build) and then deploy it (
volo ghdeploy). The ghdeploy command does not automatically build your app.