xiaolinlu / meteor-boilerplate

Boilerplate meteor app - starting point for meteor apps

meteor-boilerplate

A starting point for meteorjs applications, includes Iron Router, Bootstrap 3, Font Awesome, LESS and Coffeescript.

What's included

• File Structure
• Coffeescript
• LESS
• Iron Router
• Accounts-Entry
• Bootstrap 3.1.1
• Font Awesome 4.1.0

Installation

Make sure you have Meteor and Meteorite installed, and then clone locally and run with mrt

File structure

We have a common file structure we use across all of our meteorjs apps. The structure keeps view-dependent files together (.html, .less, .coffee).

.meteor
client
  ├── accounts
  ├── compatibility
  ├── router
  └── stylesheets
    └── lib
      ├── bootstrap.css
      └── font-awesome.css
    ├── global.less
    ├── mixins.less
    └── variables.less
  └── views
    └── dashboard
      ├── dashboard.html
      └── dashboard.less
    └── home
      ├── home.html
      ├── home.less
      └── home.coffee
    ├── footer.html
    ├── header.html
    ├── index.html
    └── loading.html
collections
  └── user.coffee
packages
public
  ├── fonts
  └── favicon.ico
server
  ├── views
  ├── accounts.coffee
  └── publications.coffee

Responsive LESS Variables

Includes 4 LESS variables to make responsive design super easy. Each variable (xs, sm, md, lg) coincides with Bootstrap media queries.

h1 {
  font-size: 24px;

  @media @lg {
    font-size: 36px;
  }
}

Search Engine Optimization

Search engines rely on <title> and <meta> tags to read page titles and descriptions. You can specify these for each page in your app by including the following in the corresponding page's .coffee file. (Sample included in home.coffee)

Tempate.home.rendered = ->

  document.title = "My New Meteor App"
  $("<meta>", { name: "description", content: "Page description for My New Meteor App" }).appendTo "head"