I can't integrate a Web Template purchased into Meteor

Question

thanks for read

I have a problem, I hope some orientation because always I worked only with bootstrap. Never with css, js, or templates. But this case is diferent.

I bought a template in wrapbootstrap.com As you know, this templates coming with a big set number files like a js, img, fonts, and of course html. Of course not always this packages are in NPM, and that is all a problem, because if only one missing file, for some reason many components dont work as well like I expect. So, the solution is, although no elegant but efective, is copy and paste these files that I bought in a correct directory in meteor.

I need integrate this template into meteor, I find in web tha Meteor.startup() help. This code help a little to solve, but no solve the problem.

I have the next issue: Sometimes the template is good, works fine and very well, sometimes is very, very bad and infinite erros. Next a img

As you can see: Window on right is perfect, everithings well. The window on left is bad, and with errors. Why? sometimes good, sometimes bad

next my file structure:

my file client/main.js has the next lines:

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

import {name as Inicio} from '../imports/ui/components/views/inicio/inicio';

class Main {} // EMPYT

Meteor.startup(function () {$.getScript('js/jquery-2.1.3.min.js', function () {});});
Meteor.startup(function () {$.getScript('bootstrap/js/bootstrap.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.superslides.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.mb.YTPlayer.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.magnific-popup.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/owl.carousel.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.simple-text-rotator.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/imagesloaded.pkgd.js', function () {});});
Meteor.startup(function () {$.getScript('js/isotope.pkgd.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/packery-mode.pkgd.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/appear.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.easing.1.3.js', function () {});});
Meteor.startup(function () {$.getScript('js/wow.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jqBootstrapValidation.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.fitvids.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.parallax-1.1.3.js', function () {});});
Meteor.startup(function () {$.getScript('js/smoothscroll.js', function () {});});
Meteor.startup(function () {$.getScript('http://maps.google.com/maps/api/js?sensor=true', function () {});});
Meteor.startup(function () {$.getScript('js/gmaps.js', function () {});});
Meteor.startup(function () {$.getScript('js/contact.js', function () {});});
Meteor.startup(function () {$.getScript('js/custom.js', function () {});});

const name = 'main';

export default angular.module('myApp', [
    angularMeteor,
    uiRouter,
    Inicio
])
    .config(config);

function config($locationProvider, $urlRouterProvider, $stateProvider) {
    'ngInject';
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/inicio');

}

My questions:

• Is a good way to import files like this?
• Iam doing something wrong?
• Exist other way?

Please need help, due I don't understand the File Structure documentation. I need a example. Thanks for your time and read

Aditional notes:

• My file client/main.less is empyt, no conflict with it
• /lib directory is empyt
• Am working with Angular, AngularMeteor, UiRoute
• For now, all html is in imports\ui\components\views\inicio\inicio.html
• Imposible rename the js files with a number before the name, like _1appear.js, the template don't works that way
• The load order is like the template indicates, like as my client/main.js has.
• If I put my js files into a client/compatibility appear more errors.
• I new in Meteor but not in Tempaltes Web, I integrated more templates in fullstack with yeoman and grunt, no problems, but in meteor is very dificult.

Answer 1

You need to port those files to use modules (or find already-wrapped versions on npm), so that they can be bundled up in the correct order with the rest of your JS code.