How to Properly Integrate 3rd Party Frameworks

I am trying to integrate velocity.js into my Sage-based theme, and having a heck of a time trying to get it to work properly when adding it to the theme (the CDN works).

I’ve searched Discourse thoroughly and couldn’t find a solution based on the other threads I came across. This is likely not a “Sage” issue, but instead a competency issue on my part, so I apologize in advance.

I did the usual “bower install velocity --save”

I can see that when I run gulp, Velocity is available in the /dist directory, but when trying to utilize it within main.js, e.g.,

$element.velocity("fadeOut", { duration: 1500 });

I continually get the error that “velocity is not a function.” I attempted to “require(“path/to/velocity”)” in the main.js file, but then it tells me require is “not defined.”

(Side note, what is the correct path to use when doing a require(); in js files? is it /dist/scripts/file; I’m still a little blurry on how this works with the build files in Sage).

I’m not really sure how to correct this issue, and since I would like to use other packages like Velocity moving forward, I’d rather learn the “right” way and not just use the CDN version each time I run into a roadblock.

This site is built on Sage 8.

1 Like

You don’t use require in JS on Sage 8 projects

There’s a lot of resources available on 3rd party integrations between this forum, the screencast on gulp + Bower, and the Sage book

I’ve looked through all but the screencast, and still haven’t been able to resolve the problem.

Is there a specific “next step” that I’m missing to get this to work properly. I’ve exhausted many of the solutions found in the threads here on the ones I could find via search.

Looking at the velocity package it looks like the main property for bower.json is correctly defined, and you said that you do see it available in the built JS. Maybe the way you’re attempting to use it in your JS is incorrect?

I thought that may be the case too, until I plugged in the CDN copy and it worked beautifully, without issue. I grabbed the screencast (not sure why I haven’t picked it up before, it only being $10 and practically a steal); if that doesn’t shed some light on how to get things working properly, I’ll dig in a bit more.

Whatever the case may be, if the solution is something that is useful – and not just my incompetency, I will post it here for anyone else that runs into this issue.

Thanks for the follow up.