How do I include an external JS lib in a meteor app?

Question

I have a basic bootstrap page set up using the Meteor JS framework.

I've followed this tutorial:

http://www.manuel-schoebel.com/blog/meteorjs-and-twitter-bootstrap---the-right-way

I want to use Jcrop (an external JS lib):

http://deepliquid.com/content/Jcrop.html

In the bootstrap file I only need to include the body element and the content. How do I include this JS source, and any other required lib? Usually I'd just reference the lib in the html page. Does Meteor magically handle this in some way?

Thanks again in advance for any pointers.

Answer 1

The easiest way is to use mrt . I've used this package before and it worked like a charm.

mrt add jquery-jcrop

Otherwise, you can download jcrop and put jquery.Jcrop.min.js somewhere in your source tree. Meteor will automatically create the script tag for you so you do not need to change your html.

The only trick is making sure that its dependencies are loaded, which is what the mrt package does.

Answer 2

With JCrop you can use meteorite to add it in:

mrt add jquery-jcrop

If you cant find the package on atmosphere you can add the files into a folder in /client/compatibility . It's usually simple if you have a minified file. This directory is slightly special, since Meteor won't apply variable scoping to files in it.

For others with multiple files, file loading order is important and you would have to make a package for it.

Meteor will automatically reference the file so you can just start using it. For most Jquery plugins, such as JCrop, you can use the Template's rendered callback to instantiate the element on the template.