CDN
7 Jun 20236 minutes to read
The CDN links are provided individually for all the scripts and style sheets of Syncfusion Essential JS components.
CDN scripts links
External dependency libraries
The basic syntax follows below,
http://cdn.syncfusion.com/js/assets/external/[fileName]
Example: http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js
NOTE
The first three script libraries listed below are mandatory to render any of the Syncfusion Essential JS widgets.
Syncfusion Dependency Libraries - Based on latest build version
The CDN script files are maintained for each version of the Essential Studio individually. Refer the following syntax:
http://cdn.syncfusion.com/[version]/js/web/[fileName]
Example, to access the ej.web.all.min.js file in 24.2.3 version – http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js
The KnockoutJS and AngularJS dependencies can be accessed through the following syntax,
http://cdn.syncfusion.com/[version]/js/common/[fileName]
Example, to access the ej.widget.angular.min.js file in 24.2.3 version – http://cdn.syncfusion.com/24.2.3/js/common/ej.widget.angular.min.js
CDN style sheet links
The CDN links for all the CSS files are provided in the below table. Refer the following syntax:
http://cdn.syncfusion.com/[version]/js/web/[fileName] – Core
http://cdn.syncfusion.com/[version]/js/web/[theme-name]/[fileName] – Theme related
Refer CDN links for specific theme
Below table provides the links for the Flat-Azure and Flat-Azure Dark themes . Likewise, you can refer for any of the 13 available themes just by referring the required ej.theme.min.css available under each of the theme folders along with the widget core file.
| Name | Details | CDN link |
|---|---|---|
| Flat-Azure | Here, the widget core file (ej.widget.core.min.css) is common and the theme file ej.theme.min.css is uniquely available under the flat-azure theme folder. |
Secured Link:
https://cdn.syncfusion.com/24.2.3/js/web/ej.widgets.core.min.css https://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.theme.min.css Unsecured Link: http://cdn.syncfusion.com/24.2.3/js/web/ej.widgets.core.min.css http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.theme.min.css |
| Flat-Azure Dark | Here, the widget core file (ej.widget.core.min.css) is common and the theme file ej.theme.min.css is uniquely available under the flat-azure-dark theme folder. |
Secured Link:
https://cdn.syncfusion.com/24.2.3/js/web/ej.widgets.core.min.css https://cdn.syncfusion.com/24.2.3/js/web/flat-azure-dark/ej.theme.min.css Unsecured Link: http://cdn.syncfusion.com/24.2.3/js/web/ej.widgets.core.min.css http://cdn.syncfusion.com/24.2.3/js/web/flat-azure-dark/ej.theme.min.css |
NOTE
All the provided CDN links can be accessed either through
httporhttps.
Refer local Scripts and CSS, when CDN fails
One of the major risk with CDN links is that – sometimes it may go down due to the network or connection problems. On such scenarios, we can refer the local scripts and CSS files dynamically in the application by checking if the scripts and CSS files loaded through CDN returns undefined as depicted below,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My first HTML page</title>
// CDN LINK references
<link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == "undefined") { // If CDN fails, jQuery returns undefined
// Referring local scripts - Specify the path where the below files are located in your machine
document.write(decodeURIComponent('%3Cscript src="Scripts/jquery-1.10.2.min.js" %3E%3C/script%3E'));
document.write(decodeURIComponent('%3Cscript src="Scripts/jquery.easing.1.3.min.js" %3E%3C/script%3E'));
document.write(decodeURIComponent('%3Cscript src="Scripts/jsrender.min.js" %3E%3C/script%3E'));
}
if (typeof ej == "undefined") { // If CDN fails, ej returns undefined.
// So that, refer the Syncfusion stylesheets and scripts from the local path here
// StyleSheet reference from the local system path
document.write(decodeURIComponent('%3Clink rel="stylesheet" href="Content/ej/web/default-theme/ej.web.all.min.css" %3C/%3E'));
// Script reference from the local system path
document.write(decodeURIComponent('%3Cscript src="Scripts/ej/ej.web.all.min.js" %3E%3C/script%3E'));
}
</script>
</head>
<body>
<!--Container for ejDatePicker widget-->
<input id="startDate" type="text" />
<script type="text/javascript">
$(function () {
// initialization
$("#startDate").ejDatePicker();
});
</script>
</body>
</html>