What's the best way to add external (CDN) scripts?

archived đź—„
1

I have a couple other scripts that are on other CDNs and I’m not sure what the best way to get them included.

For instance I have the JW Player hosted here: http://jwpsrv.com/library/r6gnRvrdEeK_NxIxOUCPzg.js

Where should I put this code to best suit the Roots/Sage setup.

Thanks.

2

Somebody has to know what the best practice is for this.

3

I would place it in the assets function in libs/assets.php.

Use wp_enqueue_script for the cdn with local fallback. Look at how jQuery is enqueued.

4

Ideally you’d be adding to lib/assets.php using “bower_map_to_cdn” which would pull the bower.json dependency based on version.

You’ll also need to add the CDN to $templates on line 81.

For example using jquery.isotope as an example:

function bower_map_to_cdn($dependency, $fallback) {
// Added 'cloudflare'
$templates = [
   'google' => '//ajax.googleapis.com/ajax/libs/%name%/%version%/%file%',
   'cloudflare' => '//cdnjs.cloudflare.com/ajax/libs/%name%/%version%/%file%'
 ];


}
function assets() {

  wp_enqueue_script('jquery.isotope', bower_map_to_cdn([
  'name' => 'jquery.isotope',
  'cdn'  => 'cloudflare',
  'file' => 'isotope.pkgd.min.js'
    ], asset_path('scripts/isotope.pkgd.min.js')), [], null, true);
}

and then in bower.json

"dependencies": {
    "modernizr": "2.8.2",
    "jquery": "1.11.2",
    "bootstrap": "3.3.2",
    "jquery.isotope": "2.2.0"
  },

which maps the CDN url to https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js

5

Looks good. Only some of these are not in bower ( JW Player ). But it looks like it’s going to go in lib/assets.php no matter.

Thanks.

6

This doesn’t seem to work in v8.2.1 there is no $templates variable in lib/assets.php …

7

Using jQuery with a CDN was deemed site/plugin territory and was moved to Soil Move jQuery CDN feature to Soil by retlehs · Pull Request #1422 · roots/sage · GitHub

8

Hi @kalenjohnson, do you know how would the process of adding an external CDN script in sage 9 be?? I have an external CDN script that I need to include in my project using sage 9, and I was wondering what is the best way to do so. Here is its source "https://service.force.com/embeddedservice/4.1/esw.min.js"
Thanks for your help!