How to Use a JavaScript Reporting Tool within an Express.js Application

Modern web applications often rely on backend frameworks like Express.js to manage APIs, databases, and application logic. However, when it comes to presenting data in a meaningful way, developers need a reporting solution that integrates seamlessly with their existing stack without adding unnecessary server complexity. JavaScript reporting tools such as ActiveReportsJS make this possible by enabling developers to design and display rich, interactive reports directly in the browser while pulling data from backend services. Because the tool is fully client-side, it can be embedded into applications built with frameworks like Express.js while still consuming data from APIs or databases.

In this tutorial, you’ll learn how to combine the flexibility of Express.js with a JavaScript reporting solution to build a simple reporting workflow. We’ll walk through creating an Express application, exposing data from a SQLite database through a JSON endpoint, designing a report with ActiveReportsJS, and embedding a report viewer in a web page to display the results. By the end, you’ll have a working example of how to integrate reporting into a Node.js application and visualize backend data through a modern, browser-based report interface.

The tutorial proceeds through the following sections:

• Create a new Express.js application
• Create an app route to retrieve the data from a SQLite database in JSON format
• Create an ActiveReportsJS report to visualize the retrieved JSON data
• Create a static HTML page to host the ActiveReportsJS Report Viewer component and display the report

Ready to Use JavaScript Reporting Tools? Download ActiveReportsJS today!

Create an Express.JS application

To create a new Express.js application, run the following command from a terminal or command prompt.

mkdir ReportingOnNode
cd ReportingOnNode
npm init -y
# if you prefer using yarn:
# yarn init -y if you prefer using yarn
npm i express better-sqlite3
# if you prefer using yarn:
# yarn add express better-sqlite3

Then open the newly created ReportingOnNode directory in your favorite code editor, such as Visual Studio Code.

Add Application Data

In this article, we will be using the Chinook SQLite database. Create the “data” folder in the application's root, and download and unpack the content of the chinook.zip file into that folder. Then add the "services" folder in the application's root and create the "services/customers.js" file with the following content.

const sqlite = require('better-sqlite3');
const path = require('path');
 
const db = new sqlite(path.resolve('data/chinook.db'), {fileMustExist: true});
 
function getCustomers(){
    var query = "SELECT CustomerId, FirstName, LastName, Country FROM customers";
    return db.prepare(query).all();
}
 
module.exports = getCustomers;

Next, add the "routes" folder into the application's root and create the "routes/customers.js" file with the following content:

const express = require('express');
const router = express.Router();;
const getCustomers = require('../services/customers');
 
router.get('/', function(req, res, next) {
  try {
    res.json(getCustomers());
  } catch(err) {
    console.error(`Error while getting customers `, err.message);
    next(err);
  }
});
 
module.exports = router;

Finally, create the "index.js" file in the application root and add code to run the application and initialize the "customers" route.

const express = require('express');
const app = express();
const port = 3000 || process.env.PORT;
const customersRouter = require('./routes/customers');
 
app.use(express.static('static'))
 
app.use('/customers', customersRouter);
 
app.listen(port, () => {
  console.log(`The app listening at http://localhost:${port}`);
});

Run the website locally with the "node index.js" command and then open http://localhost:3000/customers in a browser. You can see the customer list in JSON format.

Create an ActiveReportsJS Report

Let's create a report that visualizes this data from the GraphQL API.

In the Standalone Report Designer Application, click the File menu and select the Continuous Page Layout template for a newly created report.

Open the Data panel of the property inspector and click the Add button.

In the Data Source editor dialog, type "Chinook" for the NAME field, http://localhost:3000/customers for the ENDPOINT field, and click the Save Changes button.

Click the + icon near DataSource in the Data panel.

In the Data Set Editor dialog, type Customers in the NAME field and $.* in the JSON Path field.

Click the Validate button, ensure that the DataBase Fields section displays [4 items] text, and click the Save Changes button.

Drag and Drop the Customers dataset from the data panel into the report body. It will automatically create a Table data region consisting of the Column Headers Row and the Detail Row.

Select each column header and set the Font Weight to Bold using the corresponding button on the toolbar.

Set the Text Alignment of the textbox that displays the CustomerId to Left.

The table design could look like the following picture:

Click the File menu, then save the newly created report in the application’s static folder (it needs to be created) under the name Customers.rdlx-json.

Create an HTML page to display the report

Add the "customers.html" file into the newly created "static" folder with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customers Report</title>
    <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
    type="text/css"
  />
  <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
    type="text/css"
  />
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
  <style>
    #viewer-host {
      width: 100%;
      height: 100vh;
    }
  </style>      
</head>
  
<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new ActiveReports.Viewer("#viewer-host");
        viewer.open('Customers.rdlx-json');
      </script>  
</body>
</html>

Now you can visit the http://localhost:3000/customers.html URL in the browser, and the page will display the Customers report.

Conclusion

Integrating a JavaScript reporting tool into an Express.js application provides a practical way to connect backend data services with powerful client-side visualization. By exposing data through simple API routes and consuming it in an embedded report viewer, developers can create flexible reporting solutions without introducing heavy server-side reporting infrastructure. This approach allows you to keep your Node.js backend focused on data access while the browser handles report rendering and interaction.

With the foundation covered in this tutorial, you can extend the solution further by adding parameters, connecting to different databases, or embedding reports into larger dashboards and web applications. As your application grows, combining Express.js with a client-side reporting engine like ActiveReportsJS enables you to deliver interactive, data-driven experiences while maintaining a lightweight and scalable architecture.

Ready to Use JavaScript Reporting Tools? Download ActiveReportsJS today!