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.
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.
Meteorplate is fittingly using HTML5 Boilerplate, along with the typical Meteor
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).
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.