Deploying Stimulsoft components using CDN services

Author: Tim Crawford
In this article, we’ll discuss the process of quickly deploying Stimulsoft in applications that use pure JavaScript. The main focus will be on connecting script files via CDN services. This allows for easy integration of the necessary scripts into HTML pages without the need to download them locally.

Key benefits of using CDN services

  • Fast loading. Files are loaded from the server closest to the user, which speeds up page loading;
  • Reduced server load. Scripts are stored and distributed by third-party servers, reducing the load on the user's server;
  • Automatic updates. It is always possible to connect the latest version of the library, avoiding the need for manual updates;
  • Caching. Browsers and networks can cache CDN files, reducing loading times for repeated requests;
  • Security. Major CDNs provide protection against attacks such as DDoS and use encrypted connections (HTTPS).

Thus, using CDN services is often both justified and efficient.

CDN services for distributing Stimulsoft

You can access script files through the following services:

Sample project

First, let's create an HTML file that will serve as the entry point for the application. By default, this file is named index.html.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>
Using CDN services, you can access script files via URLs from the npm packages of stimulsoft-reports-js and stimulsoft-dashboards-js. For example, using the cdn.jsdelivr.net service:

index.html 
...
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.reports.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.designer.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.viewer.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js/Scripts/stimulsoft.blockly.editor.js"></script>
...
In this case, the latest versions of the script files will be loaded. However, you can always load script files of a specific Stimulsoft package version. To do this, use the @ symbol in the CDN URL followed by the package version number. For example:

index.html 
...
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js@2025.1.4/Scripts/stimulsoft.reports.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js@2025.1.4/Scripts/stimulsoft.designer.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js@2025.1.4/Scripts/stimulsoft.viewer.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/stimulsoft-reports-js@2025.1.4/Scripts/stimulsoft.blockly.editor.js"></script>
...
After that, simply define a function to initialize the report viewer:

index.html 
...
<script type="text/javascript">
	function onLoad() {
		var report = new Stimulsoft.Report.StiReport();
		report.loadFile('reports/Report.mrt');

		var viewer = new Stimulsoft.Viewer.StiViewer();
		viewer.renderHtml('content');
		viewer.report = report;
	}
</script>

...

<body onload="onLoad()">
	<div id="content"></div>
</body>
...
Next, we can run the project. However, it’s important to remember that the browser doesn’t have access to the file system due to its security policies. To ensure the local project runs correctly, various web servers should be used. For example, you can globally install http-server or serve and then start the web server from the command line in the root folder of the project. In this case, index.html will be opened in the browser with the Stimulsoft viewer.

Connecting script files via CDN is an easy and fast way to integrate Stimulsoft into web applications. Using services like cdn.jsdelivr.net and unpkg.com allows you to load the latest or specific versions of script files without storing them locally. This simplifies development and deployment while reducing server load without compromising security.

Now, by following these instructions, you can easily integrate reporting and data analytics systems into your applications using CDN services.
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.
I agree