Hey All! I know that earlier forms of this topic exist in this forum, however, their answers are rather dated, and unhelpful so far (no offense intended). So, I am rehashing the age-old issue of Bootstrap Themes in Meteor that require a variety of specialty JS modules, many with evolving versions that we’ll need to update over time.
Here’s what we’ve done. I hope someone can lend a hand and shed a little light on the matter.
- We bought/downloaded the sources for Black Dashboard PRO from themes.getbootstrap.com (Link points to docs).
- We copied all the assets (js, css, scss, etc) into a
/imports/lib/blackpro/directory inside our Meteor project.
- We added
import '../imports/lib/blackpro/js/plugins/<pluginNam>.js'for almost every required plugin (see the link above in #1 for the full list) to the
/client/main.jsfile so that all the dependencies load, omitting jQuery and Bootstrap and Moment because those were installed via
meteor npm install --save .... No import errors so far…
- We installed
fourseven:scssin our app.
- We linked
/client/main.scss, which works.
- We put a basic HTML template in place to see the output in
- We started the app and have no access to any of the expected globals in the client using the Chrome Dev Tools JS Console. Seriously, none of the globals from the imported files in
/client/main.jsare in scope save those of jQuery.
EDIT 1: Here’s what we could do (according to other posts):
- Put all the bootstrap lib files in the /public folder.
- Reference the public static files directly in script tags just before the
</body>tag in our body.html template.
- HODL while the scripts load globally and manually.
- Assume that the script globals will be available to template specific JS code.
EDIT 2: Here’s what we could also do, I am realizing:
- Leave the ui code inside
- Build the individual templates meticulously, one component at a time (e.g. nav, header, chart1, chart2, etc).
- Include those reusable individual templates in various “master” or “top-level” templates.
- Use specific
importstatements within the JS code on a per-template basis, importing the top-level export objects as-needed and using them in the proper event and rendered ui code.
- Write a book on how this is done for large-scale Meteor UI engineering and sell the idea to Manning Publications.
I feel like we are missing a very important and not-so-obvious fact about this here. Based on the Docs, I imagine that I could control load order in Meteor at a global level using import statements written in
/client/main.js and all the resulting vars would load magically.
I also realize that there are some ES2017 standards at work here and I may be lacking in my understanding of how the files required for the bootstrap theme need to be included in the project altogether.
My ultimate goal is to be able to use Blaze to develop reusable components that leverage the files included in the Bootstrap theme and extend additional capabilities using other independent Bootstrap libraries to improve upon the theme we have.
Will someone help illuminate this more completely for me? Generally, how do we include external UI libraries for use in our Meteor client code?
Thank you for you help, everyone.