jaywon/gist:47717131cc2fc6998924

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    Meteor

Installation


Meteor: $ curl https://install.meteor.com/ | sh
Meteorite(deprecated): $ npm install -g meteorite
Yo: $ npm install -g yo
Meteor Generator: $ npm install -g generator-meteor
MongoDB: brew install mongodb

Create New Project


$ mkdir meteor-meter
$ cd meteor-meter
$ yo meteor

Iron Router: Y
Bootstrap w/ LESS: Y


$ mrt install

Project Directory Structure


client/

compatibility/
lib/

subscriptions.js


styles/

theme.css


views/

common/
home.html
home.js
layout.html
routes.js


lib/

collections.js


packages/
private/
public/

fonts/
images/
robots.txt


server/

publications.js
security.js
server.js


smart.json

Creating Application Skeleton

Step 1 - Define Data Collections:


Create the data collections that your application will use.
You should have a general idea of what these should be before starting your application

//lib/collections.js

Posts = new Meteor.Collection('Posts');
Comments = new Meteor.Collection('Comments');
Step 2 - Create Your Server Startup Script


All bootstrapping functionality that your application needs to perform when the application starts
should be performed in the Meteor.startup routine

//server/server.js

Meteor.startup(function () {
  if (Posts.find().count() === 0) {
    var names = [{title: "What is HTML?",
                  body: "WTF is HTML anyways..."
                 },
                 {title: "Why is the sky blue?",
                  body: "I mean I get people THINK it's blue but who's to say it's not green"
                 },
                 {title: "Does anyone else hate simple get started tutorials?",
                  body: "It seems like everyone of these starter tutorials makes it seems so easy and then I start to build something and can't figure anything out. Am I alone?"
                 }
                ];
    for (var i = 0; i < names.length; i++){
      Posts.insert({title: names[i].title, body: names[i].body, score: 0});
    }
  }
});
Step 3 - Create your Meteor Publications


Setup your Meteor publications on your server to register all changes that should be broadcast to connected clients

//server/publications.js
Meteor.publish("posts", function(){
  return Posts.find();
});
Step 3a - Create you Meteor Publication Security settings

//server/security.js
Posts.allow({
  'insert': function (userId,doc) {
    /* user and doc checks ,
    return true to allow insert */
    return true; 
  },
  'update': function (userId,doc) {
    /* user and doc checks ,
    return true to allow update */
    return true; 
  }
});
Step 4 - Create your Meteor Subscriptions


Setup your Meteor subscriptions on your client to notify the client anytime data on the server has changed'

//client/lib/subscriptions.js
Meteor.subscribe('posts');
Step 4 - Create your Client Templates


Setup your client side HTML templates

//client/views/home.html
<head>
  <title>Meteor Meter</title>
</head>

<body>
  <div id="outer">
    {{> posts}}
  </div>
</body>

<template name="posts">
  <div class="posts">
    {{#each postings}}
      {{> post}}
    {{/each}}
  </div>
</template>

<template name="post">
  <div class="post">
    <span>
      <span class="score">{{score}}</span>
      <span class="title">{{title}}</span>
    </span>        
  </div>
  <div>
    <div class="score">
      <a class="upvote">Vote Up</a> | <a class="downvote">Vote Down</a>
    </div>
  </div>
  <div>
    {{body}}
  </div>
</template>
Step 5 - Create your Client Template Event Handlers


Setup your client side event handlers

//client/views/home.js
Template.posts.rendered = function(){

};

Template.posts.created = function(){
  
};

Template.posts.destroyed = function(){
  
};

Template.posts.helpers({
  postings: function(){
    return Posts.find({}, {sort: {score: -1, name: 1}});
  }
});

Template.post.events({
  'click a.upvote': function(event, template) {
    event.preventDefault();
    Posts.update(this._id, {$inc: {score: 1}});
  },
  'click a.downvote': function(event, template) {
    event.preventDefault();
    Posts.update(this._id, {$inc: {score: -1}});
  }
});
Resources!
Meteor Docs
Meteor Pad
Iron Router