Meteor.js is a fantastic framework for building web apps but there is no simple solution to take care of a web site’s essentials (content pages, asset and user management, etc) so that people can focus on building cool stuff. To that end, I built Azimuth as a way to lay a foundation for awesome Meteor.js apps (or even just simple websites that perform great). Here’s how you can use it to create a basic site, such as the home page for the project itself. From this foundation, its easy to build the types of applications Meteor is uniquely designed to support.

Setting up Azimuth

Installing Azimuth

First things first: Getting Azimuth installed. The instructions are pretty clear on the web site (check out the ‘Getting Started’ section on the home page) so no need to repeat them here. We need to decide which front-end framework to use, Twitter Bootstrap or Zurb Foundation; In this case (just because I‘m more fluent with it) I’ll choose Foundation. After running through the instructions we’ll have our Azimuth installation ready to access — point your browser to http://localhost:3000 to fire it up.

Loading Azimuth for the first time might not be a beautiful sight, but this is only because we’re loading a bare bones copy of Foundation (which is meant to be customized, hence the name). We can make it a little easier on the eyes by searching for a free/paid Foundation 5 theme (or write it from scratch) and dropping the CSS into the client directory. Once you’ve copied in the CSS, Meteor will automatically reload and include the files you added. As long as your CSS is using the right selectors, things should start looking a lot better already.

Next we need to login so we can administer the site. Click the user icon in the upper right or navigate to http://localhost:3000/login and click the ‘create account’ link. By creating the first account in the system you will automatically be given admin privileges, and set up to manage everything on the site.

Creating a new layout with page templates

The Azimuth Docs will give you a good overview of what all the buttons in the admin panel will do for you. But I know right away that I’ll have to do something outside of the scope of the CMS’ back end — Create a new page template for the home page.

Basically, I want my home page to have three sections: A heading/short summary at the top; A list of features in the middle; And installation instructions near the bottom. So I create a folder in the clients directory called ‘azimuth_home’, and put three files in it.

The azimuth_home page template — check it out on github

azimuth_home.html — Contains the template html and handlebars variables that’ll be used for the page layout.

azimuth_home.js — Helper functions for the template and any custom logic I want to introduce to the page.

azimuth_home.less — Styles specific to this page template (in .less format, so be sure to add the less package to your project to use it). Note that it is just a convention to put page-specific styles here: Any CSS in a Meteor app is available everywhere so you’ll have to scope it yourself.

Once I’ve created my page template I’ll find it available to me in the page settings panel.

Selecting the custom home page template

Adding content with blocks

I cheated a bit and hard-coded the message at the top of the page. But I know I might want to edit the features section without having to redeploy my code. So i’ll add four six-column blocks to make up a 2x2 grid of content, starting by clicking the + sign on the toolbar for the block zone. From the panel that slides out, I select from the new block dropdown, select 6 column block, and enter the contents of this block.

After doing this for the next three blocks, I notice the layout is a little wonky and need to break the row after the second block. This is easy enough to do by selecting the block settings popup on the second block, and clicking on the down arrow.