MeteorJs: how to add multiple js and css file based on templates.?

Question 1

UPDATE

I recently discovered that Meteor.startup is not a very reliable method. For me it worked on maybe 50% of the page refreshes. Please read my thread here:

Meteor JS javascript files in main.* still don't load correctly. Best practices for load order?

Original Post

I just did the same thing today.

In Meteor JS, how to control Javascript load order in relation to DOM load order? For animations

I created client/views/application/layout.html and pasted the template code into it.

I then removed the <head> code of the template (because Meteor adds that for you) and made the rest of the code into a <template>.

I put all the template's static assets like css, fonts, images, icons, and js in public

The scripts at the bottom of the template I commented out. Normally this stuff would load after the DOM is loaded, but in Meteor's case it does NOT due to Meteor's funky way of loading things:

(the below is what I commented out)

 <script src="assets/js/jquery.min.js"></script>
 <script src="assets/js/bootstrap.min.js"></script>
 <script src="assets/js/isotope.pkgd.min.js"></script>
 <script src="assets/js/imagesloaded.min.js"></script>
 <script src="assets/js/jquery.scrollTo.min.js"></script>
 <script src="assets/js/jquery.nav.min.js"></script>
 <script src="assets/js/jquery.appear.min.js"></script>
 <script src="assets/js/twitterFetcher.min.js"></script>
 <script src="assets/js/script.js"></script>

Since the above code does not load after the DOM loads due to Meteor, you have to specify the load order in another way.

I created layout.js in the same folder as layout.html and added this:

Meteor.startup( function () {
  $.getScript("assets/js/jquery.min.js");
  $.getScript("assets/js/bootstrap.min.js");
  $.getScript("assets/js/isotope.pkgd.min.js");
  $.getScript("assets/js/imagesloaded.min.js");
  $.getScript("assets/js/jquery.scrollTo.min.js");
  $.getScript("assets/js/jquery.nav.min.js");
  $.getScript("assets/js/jquery.appear.min.js");
  $.getScript("assets/js/twitterFetcher.min.js");
  $.getScript("assets/js/script.js");
});

And now the template works. When Meteor.startup is called inside the client folder, it will load the contents after the DOM is loaded, which is exactly what we wanted to do with those javascript files.

Question 2

Have a look at https://github.com/oortcloud/unofficial-meteor-faq and the Where should I put my files? section in that. Should give you everything you need to know.