How can I add third-party JavaScript libraries to a Meteor application?

Question

I want to add a JavaScript front-end plugin, like jquery.center.js, to a Meteor app.

If I put it in my app/ directory and refresh the page

Answer 1

Put it inside the client folder such that it is only loaded on the client, no need for jQuery on server.

Answer 2

You are putting jquery plugin javascript file in app folder directly,so that javascript file will be be loaded for client as well as server.

As per Meteor documentation:
Client loads javascript from: project/public and project/client
Server loads javascript from: project/public and project/server folders.

As of v1.0, Meteor is using jQuery internally in the client, so you can use your library directly without adding jQuery. However, it's recommended that you add jQuery to your Meteor project explicitly:

meteor add jquery

The Meteor docs explain in depth how JavaScript files are loaded and where static assets should go (CSS, images).

See also how to repackage an existing library for Meteor.

Answer 3

Starting with Meteor 1.3, you can add 3rd party JavaScript libraries to a Meteor project directly via their npm package:

meteor npm install --save moment

Both server-side and client-side package work without modification because Meteor's ES2015 module system takes care of creating a Node-like environment in the client much as browserify or webpack do.

If an npm package happens to not function correctly, look for a wrapper on Atmoshpere. Atmosphere is Meteor's official 3rd package repository, but less and less relevant after Meteor v1.3. It will eventuall be phased out.

History

Before Meteor 1.3, you had to repackage 3rd party libraries for Meteor. A tool called Autopublish was developed to automate the process. After the Meteor Development Group stopped offering free hosting at meteor.com, Autopublish was discontinued.

Answer 4

One way to do this in MeterorJS 1.3.x

Add the JS files in the public\js\ directory

Load it up from Meteor.startup method using $.getScript in client/main.js If you want to control script load sequence, control with multiple $.getScript for each js files.

Meteor.startup(function(){
    $.getScript('js/fhir-client.js', function(){
        // script should be loaded and do something with it. 

    });
});