Another ‘Hello World’ to MeteorJS

In this tutorial, I’ll try to walk you through building a simple realtime wall (like a guestbook) where anyone can post messages. And let’s try to do this without using any magic.

Install Meteor and Atmosphere #

Create new project #

Just go to the directory you want to create the app and create a new meteor project using following command.

meteor create the-wall

Feel free to run the meteor app although we haven’t even started coding it yet. It’s okay to keep it running even while you’re coding.

cd the-wall

Remove the magic #

We’re not going to use any magical features of Meteor. So, let’s remove them.

meteor remove insecure
meteor remove autopublish

Create a collection #

In meteor, we’ll be keeping most of our realtime data in collections. Create a new file posts/collections/posts.js. This will make this collection available in both the server and the client. And we want to let anyone post messages and make sure no one can delete them.


Posts = new Meteor.Collection('posts');

  insert: function () { return true },
  remove: function () { return false }

Publish the collection #

Data collections must be first published before they can be accessed by clients. For our example, let’s publish posts which posted in last 24 hours.


Meteor.publish('latestPosts', function () {
  var yesterday = new Date().getTime() - 1000*60*60*24;
  return Posts.find({created: {$gt: yesterday}});

Publishing happens server side therefor we can place the code inside a directory called server. For more information about meteor directories, please read [Organizing Meteor files](#).

Let’s add some example posts so we can check if everything works. Go to localhost:3000 using a browser (I guess its either Firefox or Chrome). Bring up the developer console and enter the following.

var twoDaysAgo = new Date().getTime() - 1000*60*60*24*2;
Posts.insert({text: "Two Days Ago", created: twoDaysAgo});

var twoHoursAgo = new Date().getTime() - 1000*60*60*2;
Posts.insert({text: "Two Hours Ago", created: twoHoursAgo});

var now = new Date().getTime();
Posts.insert({text: "Now", created: now});

Subscribe and fetch posts #

If you try fetching them from the database, it won’t work because first we must subscribe to a publication. If you try to fetch anyways, it’ll return an empty array.

=> []

First you must subscribe to the publication and wait until it’s ready.

var sub = Meteor.subscribe('latestPosts');

After some time, the subscription will be ready. You can check it using the ready method of the object returned by Meteor.subscribe().

=> true

Finally, you can access posts from the client.

=> "[object Object],[object Object]"

You’ll notice that although there are 3 docs in the collection, only 2 gets to the client through this publication/subscription. This happens because we have limited docs sent to the client when publishing them.

Method to add posts #

Earlier we added posts from the client side and we set the created time manually. To make things simpler, we can create a Meteor method which does this for us.


  addPost: function (text) {
    check(text, String);
      text: text,
      created: new Date().getTime()

And we can make sure this works by calling the method form the client. Try running this command on browser console.'addPost', 'Added using method');

Finally the UI #

Let’s just wrap things up with a simple UI.

Main Wrapper #


  <div id="wrapper">
    {{> newPost}}
    {{> postsList}}


#wrapper {
  max-width: 900px;
  margin: 5em auto;
  padding: 0 5em;
  font-family: sans-serif;

Form to add new post #


<template name="newPost">
  <div id="newPost">
    <textarea autofocus id="newPostText"></textarea>
    <button id="newPostButton">Save Post</button>


#newPost textarea {
  display: block;
  width: 100%;
  height: 2.5em;
  padding: 0.5em 0.75em;
  outline: none;
  font-size: 1.5em;
  box-sizing: border-box;

#newPost button {
  display: block;
  width: 100%;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  outline: none;

  'click #newPostButton': function (e) {
    var textarea = $('#newPostText');
    var text = textarea.val();'addPost', text);

List Posts #


<template name="postsList">
  <ul id="postsList">
  {{#each posts}}


#postsList {
  padding: 0;

#postsList li {
  display: block;
  font-size: 1em;
  background: rgba(0,0,0,0.05);
  padding: 1.5em 2em;
  margin: 1em 0;
  border: 1px solid rgba(0,0,0,0.1);



Template.postsList.posts = function () {
  return Posts.find();

Now read this

Setting up wingpanel-slim

Elementary OS is one of the most beautiful operating systems I’ve ever used. Usually I mod my OS extremely but for the first time, I left most of the OS defaults as is. The operating system UI is really minimal and if you use... Continue →