Meteor ❤ NPM (Client)

Here’s how to use npm on Meteor client side.

Meteor ❤ NPM

Why?

I’m trying to use our beloved js library within Meteor, but most example I found is mess up, server only, overkill, and confusing.

After wasting my time messing around fantasy react example without knowledge of react, and confusing with coffee script that I never wrote just for accomplish simple thing like call js library on client side. I was like… WHY! It’s make no sense at all!

Hint : (Actually I said WTF! but I don’t want to be rude so pretend that you never read this line, oops!)

You should see my point now. This is pretty much NX (Noob eXperience) in coding world just like UX in design world. So here’s how to do it.

#1 Create Meteor project

We will use momentjs for our example so here’s our project name.

$ meteor create meteor-moment
$ cd meteor-moment

#2 Add meteorhacks:npm and cosmos:browserify

This will add 2 packages at once. Just for awesome.

$ meteor add meteorhacks:npm cosmos:browserify

#3 Run project once

To generate package.js

$ meteor              
[[[[[ ~/git/meteor-moment ]]]]]               

=> Started proxy.                             
=> Started MongoDB.                           
   Loading plugin `initializing-npm-supp...  /

-> creating `packages.json` for the first time.
-> add your npm modules to `packages.json`

=> Creating container package for npm modules

-> npm support has been initialized.
-> please start your app again.

# 4 Add npm modules to packages.js

We want to use moment so here we go.

{
  "moment" : "2.10.6"
}

Hint : You can add more if you feeling brave.

#5 Add lib/app.browserify.js

Declare it so we can use anywhere via client.

moment = require("moment");

#6 Use it in html/js

In meteor-moment.html

<p>You've pressed the button at {{at}} for {{counter}} times.</p>

In meteor-moment.js

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

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    },
    at: function () {
      return Session.get('at');
    }
  });

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

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Here’s sum up. for #4, #5, #6

Hint : see as diff here for git lover ❤

#7 Run it and now we done!

Phew! Now we can fall in love with Meteor again ;)

And here’s result from http://localhost:3000/

That welcome moment!

My journey against Meteor just begin. Many things to learn and if you like this, Please recommend to other (noobs like me) so we can save each other time and waste our time for save the world instead. :)

UPDATE : 2015/12/14 Good news! Meteor 1.3 announcing npm support yeah!

Happy Coding!