Vlad Filippov

 

I’ve decided to try out Meteor for my GitHub Game Off project. The framework was really fun to use and I’m really looking forward to version 1.0. Notice: The stuff I talk about in this article is related to Meteor v0.5.2, some of these things will probably change in future releases.

Project Structure

I’m personally used to organized project structures. Especially coming in from Backbone or Ember, most Meteor examples may seem very unorganized. Some Meteor examples just consist of a few files where Meteor.client and Meteor.server are in the same file. I really wanted to post a picture of my project folders, because I feel like it’s a lot faster to understand than reading the docs. So here it goes, this is the project structure that I used for one of my Meteor projects:In this case, the client code is in client. client/js has all the front-end JavaScript code. The server folder has all the server code, the server component for this application was just a few lines, it didn’t have to be split into modules. Same goes with the shared.js file, there were 3 lines of shared code, so I didn’t even make a folder for it ( I still have to test ashared folder and check if it works properly). Most of the code was in client, this folder had over a dozen of different files, that are managed by Meteor’s dependency manager.

Dependency Management

This is pretty simple, there a few rules defined in Meteor’s code that will help you organize your code. Here are the dependency rules, explained:

• Files from [project_root]/lib are loaded first.
• Files are sorted by directory depth. Deeper files are loaded first.
• Files are sorted in alphabetical order.
• main.* files are loaded last. (thanks to this SO post)

Here’s an example of three.js being a dependency for all other components of an app:

tween.js and Stats.js depend on three.js, so in this case the library is 2 levels deep in /core/three

Useful Framework Features

Here’s some Meteor features that you might miss when you first start developing with it.

Meteor.autorun

Meteor.autorun uses the same concepts of reactivity as other stuff in Meteor. Here’s an example from the docs:

Meteor.autorun(function() {
  var oldest = _.max(Monkeys.find().fetch(), function (monkey) {
    return monkey.age;
  });
  if (oldest)
    Session.set("oldest", oldest.name);
});

Another example:

Meteor.autorun(function(handle) {
  if (!Session.equals("shouldAlert", true)) return;

  handle.stop();
  alert("Oh no!");
});

In my case I use autorun to monitor if the user has logged in. When Meteor.userbecomes available, then I can attach tempData to the logged in user. Here’s a simple example:

Meteor.autorun(function() {
    if (Meteor.user()) {
        Meteor.call('userUpdate', { data: Session.get('tempData') });
    }
});

Meteor.auth

Here’s a quick run down of the setup. In this case, I’ll explain how to add GitHub login to your app. First of all you need the auth package. Adding packages from the command line didn’t work for me, but it’s really easy to do it manually. Just go to[project_dir]/.meteor and open the packages file. Here’s what I have in that file for auth:

accounts-base
accounts-oauth2-helper
accounts-ui
accounts-github

Then add the login buttons into your template: {{loginButtons}}. Load up your app, open the view that has the template with the {{loginButtons}} part. Now you should see a red configuration button, click on it and configure your auth. If you ever run meteor reset, you will have to do the configuration step again.

Once this is properly configured, you will see a proper login button. That’s all you need to do! If you want to catch the event when the user is created, useAccounts.onCreateUser. Here’s an example:

Accounts.onCreateUser(function (options, user) {
    // do stuff here
    if (options.profile)
        user.profile = options.profile;
    return user;  // make sure to return 'user'
});

Meteor.status

This feature allows you to control the network connection between your Meteor server and client. Meteor.status() will return a lot of useful information, such as the connection status via the connected boolean value. You can issue a reconnect withMeteor.reconnect() or try and switch servers using Meteor.connect([url]).

Deployment

• Tip 1: You can use meteor deploy --password to password protect your*.meteor.com app domain. This way no one else can re-deploy an app with the same name. Once you set your password, every time you deploy the app, it will ask you for your password. If you forgot your password, join the #meteor irc channel and ask one of the admins to reset it for you.
• Tip 2: meteor mongo will let you use the MongoDB shell for your local app.
• Tip 3: meteor mongo [app_name] will let you use the MongoDB shell for your deployed app.
• Tip 4: meteor reset will let reset the datastore, all your configuration and users will be gone.