CODEWITHSUNDEEP
meteor
jerico
jerico

Reputation: 1839

How to include JavaScript from a CDN in meteor?

I'd like to include JS from a CDN in Meteor before including my own client scripts so that the client scripts can depend on it.

...
<script type="text/javascript" src="https://ajax.googleapis.com/..."></script>
...
<script type="text/javascript" src="/client/..."></script>
...

I tried including the script via *.html file and between <head> tags. But it seems that header content from *.html files will always be appended to the end of the HTML header, no matter where I place it in the file hierarchy (e.g. placing the file in a lib folder or sorting it alphabetically before client JS files won't help).

Any ideas how I could include JS from a CDN before client scripts without having to build a smart package?

Upvotes: 22

Views: 8878

Answers (3)

Amir Samakar
Amir Samakar

Reputation: 505

You can append the script after the template is rendered. So your script will load only after every other line has been loaded. For example if you directly add a jquery plugin to your template html file, you'll get "jquery not found" error. But this approach prevents that:

Template.Main.onRendered(function () {

      $('head').append('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>');

});

Upvotes: 3

cazgp
cazgp

Reputation: 1558

Assuming you don't need to load these files before the Meteor packages, create a JS file which is loaded before any of the others. Meteor loads files in alphabetical order so it must be the first file loaded. To that end, naming it aaLoadCDN.js should suffice. Dynamically load the CDN scripts by adding a script src element to the document head:

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');  // optional
script.setAttribute('src', 'url/to/the/cdn/script.js');
document.getElementsByTagName('head')[0].appendChild(script);

Here are some real-world Meteor packages loading scripts from CDNs:

Upvotes: 10

Dan Dascalescu
Dan Dascalescu

Reputation: 152095

There's also an abandoned package called meteor-external-fileloader that gives an example using Stripe.js. It hasn't been maintained since September 2013, so be careful.

Upvotes: 0

Related Questions