Meteor load scripts, CSS specific to pages

Question 1

In short, there isn't. (Yet.)

You probably have a wrong code structure if you've got errors. There are ways to execute code only when it's needed - you should probably take a look at template.rendered and template.created callbacks, as well as iron router controllers. However, that's for execution - everything is loaded on the beginning.

That being said, you technically could use things like require.js to load some scripts dynamically. But this negates most of Meteor's advantages. It's also quite difficult to make it work properly with Meteor.

Question 2

It's true that there's not an official way of doing this yet, but there are some effective ways of doing this. Take, for example, how I load Disqus into a blog section.

Template.blog.rendered = function() {  
  setTimeout(function(){
     var disqus_shortname = 'disqus_shortname'; // required: replace example with your forum shortname
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
     dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })
}

Which is taken from Josh Owen's blog. The difference is I wrap this is a timeout so that it blocks to wait on the template to actually be rendered.

What this script does is create a script element, set its src and append it as a child to either the head or body of the template. Again, it only does so after the template is rendered so that means all of your elements are available to your script.

If you're using Iron Router you can do the same thing with onAfterAction. The key is to append the new script as a child node in your dom. Hope this helps.

Question 3

WARNING: NOT THE BEST SOLUTION

OK, this is what I did. I put CSS and JavaScript files on the public folder, then in the <head> I wrote this little script:

$(function() {
    if(location.href.indexOf("http://yourpage.com/page") > -1) //where page is the url you want to server the files
        $('head').append('<link rel="stylesheet" href="/mobile.app.css" type="text/css" />');
});

While this is not at all the best way to do this, this could be accomplished in a "hacky" way.

But it worked.

Question 4

You can use Preloader. It worked for me :).

Question 5

My solution was to wrap the JavaScript file contents in a default function (look up exports for ECMAScript 6 if this is unfamiliar), and then import it in Meteor.

In your JavaScript file (we'll call it 'test.js'), wrap the entire contents with this:

export default function() {
    // Your file contents
}

Then, at the top of your Meteor file where you want to use that JavaScript file ('test.js' in our case), write an import at the top of the page like this:

import test from './test.js'

Then in that same Meteor file, you can call the entire contents of your JavaScript file by using the name of the file like a function call:

test();

I'm using React inside of Meteor, but the principle is the same.