Starting files

First we'll set up the app and go over basic folder structure. If you haven't already done so, you can install Meteor like this (unless you're on Windows, in which case you can download this installer and use this console emulator for a terminal):

curl https://install.meteor.com/ | sh

And create your app like this:

meteor create foosboom-meteor
cd foosboom-meteor

This gives 3 files to get you started:

First files

foosboom-meteor.html

<head>
  <title>foosboom-meteor</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>
  • While there is a <head> tag, you don't put script or link elements in here - Meteor does this for you.
  • Anything inside {{ }} are template tags. Meteor used to use the Handlebars templating language, but then added some extra features to it and called it Spacebars
  • hello means render the template called 'hello' (which is defined in the same file at the bottom). Note that usually each template belongs in it's own file.
  • Regarding the <template> element - Meteor gathers up all of these template elements and allows you to add helpers and events to it in your Javascript (for example, the ` variable comes from a helper - more on these later). You can see this defined infoosboom-meteor-js`.

foosboom-meteor.js

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault("counter", 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get("counter");
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set("counter", Session.get("counter") + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}
  • Like I mentioned in the overview, you can use Meteor.isClient and Meteor.isServer to run code in the right context.
  • Session is as it sounds - a global object where you 'set' and 'get' values. It resets when you refresh the page. But if you make changes to your code while the Meteor server is running, Meteor causes the browser to kind of semi-refresh, preserving the Session.
  • Template is a global object that contains all your templates. So if your template is called "hello" you can access it with Template.hello.
  • Template.hello.helpers() and Template.hello.events() are functions that take an object as a parameter. In this object you define your helpers and events. We'll get into these later - but you can probably work them out pretty quick.

foosboom-meteor.css

/* CSS declarations go here */

Run your app

You can now go back to your terminal and get Meteor running:

Terminal

meteor

Pretty simple. Now go to localhost:3000 and check it out.

Go edit some html and watch the browser when you hit save. Magic. Editing CSS is even cooler - new CSS changes just fade in without a page refresh. Every time you save Meteor will rebuild your application and update the client (browser). If you like you can take a peek at what Meteor turns your app into by opening up the hidden folder .meteor/local/build/programs/web.browser/app.