I am trying to add a 3rd party extension that is only available through CDN. How could I add them in an Aurelia-CLI and/or Aurelia WebPack project?
The library that I'm using is DataTables and I got it working with Aurelia-CLI by modifying the aurelia.json file by adding this:
{
"name": "datatables",
"path": "../node_modules/datatables/media",
"main": "js/jquery.dataTables",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/jquery.dataTables.css"
]
},
Then in my ViewModel
import $ from 'jquery';
import dataTable from 'datatables';
export class DataTableViewModel {
activate() {
//bind your data here
}
attached() {
$('#example').DataTable();
}
}
But the problem that I'm facing now is to add a styling extension (a DataTables Bootstrap 4 theme).
I tried adding the CDN inside the index.html and even if that doesn't give any errors, it doesn't seem to work either.
<body aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap4.min.js">
</script>
</body>
I also tried adding it inside the aurelia.json configuration file by adding the CDN inside the paths and then using it in the deps but that doesn't seem to work either.
"paths": {
"root": "src",
"resources": "src/resources",
"elements": "src/resources/elements",
"attributes": "src/resources/attributes",
"valueConverters": "src/resources/value-converters",
"bindingBehaviors": "src/resources/binding-behaviors",
"dataTablesBootstrap4": ["//cdn.datatables.net/1.10.13/js/dataTables.bootstrap4.min.js"]
},
...
{
"name": "datatables",
"path": "../node_modules/datatables/media",
"main": "js/jquery.dataTables",
"deps": ["jquery", "dataTablesBootstrap4"],
"exports": "$",
"resources": [
"css/jquery.dataTables.css"
]
},
Any suggestions?
EDIT
I just found this Aurelia-CLI issue #313 which is probably related and might mean that there is currently no ways of importing CDN.
Because bundles do not get lazily loaded and all lumped into the same bundle anyway, you can just add the CDN script into your
index.htmlfile to achieve the same thing. Or you can insert the script into the page where you need it on a per-need basis (kind of faking lazy loading).