How to properly load style sheets and scripts on a Meteor App.

Question

I am building a Dashboard using Meteor, I have bought a Design Template (HTML) from http://themeforest.net/, and cannot figure out how to properly integrate this design template into my Meteor App.

The problem is fairly simple, I am having trouble while trying to load the list of css files and js files that are required for the design template to function properly. I think the files are not being loaded in the right order and this is causing errors. For example half of the jquery plugins are not working, this could be caused if the plugin file is being loaded before the jquery file itself. I can see in network that the files are being loaded but for example the function $.sortable is not available.

What is the right method for loading stylesheets and javascript files to make sure that they are loaded in the right order?

First problem was I did not know where exactly to put these files. These files are not required for the logic of my Application so I did not want to put it in the directory client. Plus if I place them in client Meteor automatically loads them, and then I have no control over the order they are loaded in.

So I put all the Template Design dependency files in the folder Public and try to load the files manually.

I have tried the following to load the files:

1. Importing all the files in the client/main.html file:

<head>
    <meta charset="UTF-8">
    <title>ETL Web-Admin</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>


    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    ...
    <!-- ================== END BASE CSS STYLE ================== -->


    <!-- ================== BEGIN BASE JS ================== -->
    <script src="/plugins/jquery/jquery-1.9.1.min.js"></script>
    ...
    <script src="/plugins/jquery-cookie/jquery.cookie.js"></script>
    <!-- ================== END BASE JS ================== -->

</head>

2. Importing all the files in the client/main.js file:

Meteor.startup(function () {
});



// <!-- ================== BEGIN BASE CSS STYLE ================== -->
    import "../public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css"
    ...
// <!-- ================== END BASE CSS STYLE ================== -->

// <!-- ================== BEGIN BASE JS ================== -->
    import "../public/plugins/jquery/jquery-1.9.1.min.js"
    ...
//     <!-- ================== END BASE JS ================== -->

Both methods on the top give the same problem, the dependencies are not loaded properly.

Lastly to initialise the Design template, when all the elements are loaded and the (in jquery terms) document is ready I have to call two functions:

App.init()
// and 
Dashboard.init()

In the traditional HTML format it can be done as following:

<script>
        // when document is ready, do something
        $(document).ready(function () {
            App.init();
            Dashboard.init();
        });
</script>

How do I do that in Meteor ?

Jonathan Escobar Jonathan Escobar · Accepted Answer · 2016-06-21T21:16:22

Use the sctructure for projects Meteor, you files in css in client > stylesheets and you jquery in client > youNameTemplate.js

Template.youNameTemplate.rendered = function () {
    App.init();
    Dashboard.init();
}

How to properly load style sheets and scripts on a Meteor App.

1 Answers