andrew-codes / 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 more.

• Included Packages
• Installation
• File Structure
• Bootstrap and Less
• SEO
• Favicons and Touch Icons
• Seed Data

Included Packages

• Collections:
  • dburles:collection-helpers
  • matb33:collection-hooks
  • reywood:publish-composite
• Router:
  • iron:router
  • zimme:iron-router-active
  • manuelschoebel:ms-seo
  • fuatsengul:iron-router-auth
• Authentication
  • joshowens:accounts-entry
  • alanning:roles
• Seed Data
  • dburles:factory
  • anti:fake
• Less
  • Bootstrap
  • Font Awesome
• Misc:
  • Moment.js
  • Underscore.js
  • Underscore.string
  • cunneen:mailgun

Installation

1. Clone this repo to <yourapp>

% git clone https://github.com/Differential/meteor-boilerplate.git <yourapp>

2. Remove .git

% cd <yourapp> && rm -rf .git

3. Start coding!

File Structure

We have a common file structure we use across all of our Meteor apps. Client-only files are stored in the client directory, server-only files are stored in the server directory, and shared files are stored in the root. Our structure also keeps view-dependent files together (.html, .less, .js).

.meteor/
client/
  ├── accounts/
  ├── compatibility/
  ├── router/
  └── stylesheets/
    ├── bootstrap/
    ├── bootstrap-ext/
    ├── font-awesome/
    ├── global.less
    ├── mixins.import.less
    └── variables.import.less
  └── views/
    └── dashboard/
      ├── dashboard.html
      ├── dashboard.less
      └── dashboard.js
    └── home/
      ├── home.html
      ├── home.less
      └── home.js
    └── layouts/
      └── mainLayout.html
    ├── footer.html
    ├── header.html
    └── index.html
collections/
  └── items.js
packages/
public/
  ├── fonts/
  └── images/
server/
  ├── views/
  ├── accounts.js
  ├── email.js
  ├── permissions.js
  ├── publications.js
  └── seeds.js

Bootstrap and Less

The majority of Bootstrap can be customized with Less variables. If you look in stylesheets/bootstrap/variables.import.less you will see a slew of configuration variables that can be tweaked to drastically change the look and feel of your site without having to write a single line of CSS.

However we should avoid modifying the core Bootstrap Less files (in case we want to update them later), and should instead override the variables in our own Less files.

For example, to change the color of all primary buttons and links, simply add a @brand-primary variable to stylesheets/variables.import.less:

// variables.import.less
@brand-primary: #DC681D;

If you'd like to override a feature of Bootstrap that can't be modified using variables, simply create a new file in the bootstrap-ext directory named after the corresponding Bootstrap Less file, and make your changes there.

// bootstrap-ext/buttons.import.less
.btn {
  text-transform: uppercase;
}

SEO

Page titles, meta descriptions and Facebook and Twitter meta tags are handled by the manuelschoebel:ms-seo package. Global settings are configured in seo.js, while individual page settings are set at the route or controller level.

• Note: the spiderable package will need to be installed and configured on your server in order for bots to read your meta tags.

this.route('post', {
  path: '/posts/:_id',
  waitOn: function() {
    return this.subscribe('post', params._id);
  },
  data: function() {
    return {
      post: Post.find({_id: params._id})
    };
  },
  onAfterAction: function() {
    if(this.ready()) {
      SEO.set({
        title: this.data().post.title + ' | ' + SEO.settings.title,
        description: this.data().post.description
      });
    }
  }
});

Favicons and Touch Icons

Upload your image to http://realfavicongenerator.net/ and place the resulting images in public/images/favicons

Seed Data

You can use the dburles:factory and anti:fake packages to generate fake collection data for testing your UI. See server/seeds.js for an example:

Meteor.startup(function() {

  Factory.define('item', Items, {
    name: function() { return Fake.sentence(); },
    rating: function() { return _.random(1, 5); }
  });

  if (Items.find({}).count() === 0) {

    _(10).times(function(n) {
      Factory.create('item');
    });

  }

});