Can we include external JavaScript/CSS libraries in Salesforce lightning components?

Hi Deepak,

Yes, we can include external JavaScript/CSS libraries in salesforce lightning components.

Lightning Components framework provides a great way to easily decompose applications into components. But building applications also depend on tons of other OSS libraries like JQuery, Twitter Bootstrap, Moment.js and more to implement various features.

While loading 3rd party libraries is trivial, loading them into a trusted enterprise environment like Salesforce needs to meet our strict security needs.  They also need to meet various application needs such as loading multiples files in a specific order. So with Spring ‘15 release we created a new component called ltng:require to load libraries while being secure. It has the following features:

Asynchronously load multiple CSS and/or JS libraries
Load libraries in any dependency order the app needs
Let the app know when loading all JS libraries are complete
Most importantly, load only verifiable libraries (for security purposes)
Let’s take at the syntax to better understand it:

1
<ltng:require
2
styles=”/resource/path/to/css1[,/resource/path/to/css2]”
3
scripts=’/resource//path/to/js1.js,[/resource//path/to/js2.js]’
4
afterScriptsLoaded=”{!c.controllerFunction}”
5
/>
styles – Allows us to specify multiple CSS files separated by comma. They will be loaded from left-to-right.
scripts – Allows us to specify multiple JS files separated by comma. Again they will be loaded from left-to-right
afterScriptsLoaded – Allows us to provide a JS function to notify when all JS files are loaded.
Notes:

Files paths must always start from /resource. i.e they must be a static resource to enforce security.
CDNs are not allowed at this point because they are outside of Salesforce data centers and can’t be controlled. In the future, we may allow admins to whitelist CDNs for their orgs.
If you upload a JS or CSS directly into Static resource, then you should reference them by resource name without .css or .js suffix. For example:  /resource/myjsfile or /resource/mycssfile
If your resource is inside a zip file, then you should use .css or .js suffix. For example: /resource/<resourcename>/path/to/myjsfile.js

Hi Deepak,

To reference a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.

<ltng:require scripts=”{!$Resource.***resourceName***}”
afterScriptsLoaded=”{!c.afterScriptsLoaded}” />