Getting Started With Meteor

What’s all the fuss about?

Meteor is a “Full stack JavaScript for amazing apps” and is the new kid on the block for modern web apps programmed in JavaScript. Meteor itself is Open Source and is developed and maintained by MDG (Meteor development Group). MDG’s business model is to sell hosting and services around Meteor. They have good financial backing, so hopefully they are able to thrive and stick around for a long time.

Meteor runs on NodeJS and uses MongoDB, a NoSQL database, for its database layer. It makes it pretty much a MEAN stack, but without having to configure together all the moving pieces. Everything comes ready right out the box. In the frontend Meteor uses a data storage called Minimongo that’s API-compatible with MongoDB. Here’s a short video that goes over more of the features and background.

Getting Started

Installing and setting up Meteor on your local machine is ridiculously easy. You install everything with this simple command:

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

You can then start a new project with simply this:

$ meteor create fist-app-yay
$ cd fist-app-yay
$ meteor

This will start a local server on your computer that you can visit at http://localhost:3000/. Here’s a screenshot of what you’ll get out of the box:

1st Meteor app

Unlike other frameworks that scaffold a ton of stuff right off the bat, a newly created project in Meteor is pretty basic: three main files (fist-app-yay.js, fist-app-yay.html and fist-app-yay.css) along some internal files in an hidden folder called .meteor

1st Meteor app

The CSS file is empty on a new project, and here’s the content of fist-app-yay.html:

<head>
  <title>first-app-yay</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>

And fist-app-yay.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
  });
}

fist-app-yay.html

You can see that the html tag is missing from the html file; Meteor adds it automatically. In the html file you can also see that there’s a template called hello and that this template is inserted in the body of the document using {{> hello}}. That’s accomplished using Spacebars, a Handlebar-inspired templating language that comes with Meteor.

In Spacebars, {{> someValue}} inserts the someValue template and {{ someValue }} references an object and creates what’s called a reactive data source (if the value of someValue changes somehow, the DOM will be updated automatically, no need to do anything). Magic!

fist-app-yay.js

The JavaScript file from a new project is also pretty straightforward and self-explanatory. Since the same code can be read from the client or from the server, if (Meteor.isClient) { … } and if (Meteor.isServer) { … } are really handy to separate things depending on where they should run. Alternatively, and a good idea for larger projects, you can put your server code in a directory named server and client code in a directory named client. No need for Meteor.isClient or Meteor.isServer in your code that’s in these named folders. See here for a list of Meteor special directory names.

✖ Clear

🕵 Search Results

🔎 Searching...