December 7, 2014 - No Comments!

How to build the simplest Meteor package

Today I am going to explain how to create the simplest Package for use with Meteor. I had a little trouble pushing out a simple template from a package to the app, so today I’m going to explain how it’s done.

First of all, let’s create the package. I’m assuming a basic knowledge of how Meteor works and the command-line and all that. We’ll call this package simply “test”.

 meteor create -—package test

Now Meteor will have created our base package in the packages folder. The first thing to do is to tell Meteor what we want to include. Open the packages.js in the newly created package test.

You can alter the Package.describe section if you like, but what is more important for this tutorial is to get our package template available for use in the main app. We need to modify the Package.onUse section. We will do two things: firstly, we will let Meteor know which other packages our package depends on, and secondly which files it uses.

Package.onUse(function(api) {
  api.versionsFrom('1.0');
  api.use(['templating','coffeescript','mquandalle:jade'],['client','server’]);
  api.addFiles(['test.jade','test.coffee'], 'client');
}

Aside: I write in Jade and Coffeescript, in place of html and javascript - and I would recommend you do so too. They are simple preprocessors that clean up the code syntax and make the whole coding process easier, quicker and clearer. 

OnUse

So, firstly we have told Meteor to use the templating, coffeescript and jade packages. We also specified under which architecture they should run (client and server).

addFiles

Secondly we list the files we want to include in our app. I have included a html (.jade) template and its associated javascript (.coffee) file. Let’s take a look inside those two simple files.

test.jade

This template, very simply, has a title, a “hello world” and a button.

template(name="test")
  h1 Tested
  p Hello world
  button Clickme

test.coffee
The coffee file simply logs "Hello world” to the console when the button is clicked.

Template.test.events 
   'click button': -> 
     console.log('Hello world')

Add the package

Now we tell Meteor to load the package on the command line:

meteor add test

Include the template in the main app

All that is left is to include the template in the main app wherever you want it output. Using Jade we write

+test

And you should see your little template appear. If you click, the console will log the message.

Published by: admin in Development

Leave a Reply

%d bloggers like this: