Justin McCandless

There are a lot of really cool demos out there for simple, single page Meteor apps. When you want to get a bit more practical and add a few different states with routes, Meteor still works great, but the initial work for getting this running can be a bit more strenuous. This post and my open source boilerplate project Meteorplate aim to help get you up and running in the shortest time possible.

Get Started Now

If you want to play around with this and see if it fits your app, check out the live demo. If you want to jump into the code right now, clone the Meteorplate Github repo, run meteor, and start hacking on your app.

Meteorplate

Back in the early days of Meteor, I recommended using the Backbone router and views to solve this problem in another article. Since then, Meteor has come a long way, and the community around it has too. This time around, we're going to solve this problem in Meteor 1.0+ using native Meteor templates directly as views and the widely used Iron Router for routes.

With just a little boilerplate, we'll allow page structure to be rendered with a changing main view, permissions for pages based on user accounts, and even let Google Analytics track page changes. All this will still be reactive and take full advantage of Meteor's live real-time setup.

App Structure

Meteorplate is fittingly using HTML5 Boilerplate, along with the typical Meteor client/, public/, and server/ directories at the top level, so the folder structure should be familiar. Inside of client/, we've put all of the templates in the templates/ directory as plain html (such as this one for the homepage).

Inside client/js/, main.js kicks off the app and sets everything up for Meteor. The views/ director contains all definitions of template methods and events (such as the colors page view).

The last big piece is where we use Iron Router in routes.js. In here, we've just provided a light wrapper around Iron Router's usual functionality in order to provide the nice features mentioned above. To add a route, just define a new Iron Router route in the define method and call render() with the Meteor template that you want to render.

All of this will provide you a nice setup for a fully featured Meteor app. To get started, clone the Meteorplate repo and start building your app quickly on top of this solid foundation.

Update

Meteor has stopped their free hosting period, which has killed my live demo for this project. If you want to try it, I encourage you to clone the repository and run it yourself with the meteor command.