How to Use a JavaScript Reporting Tool within an Express.js Application
Tags: javascript, webdev, tutorial, devops
Published: 2022-09-26 16:37:28

---
canonical_url: https://www.grapecity.com/blogs/how-to-use-javascript-reporting-tool-within-expressjs-application
description: Learn how to use a Javascript Reporting Tool within an Express.js application. See more from ActiveReportsJS today.
---
ActiveReportsJS is a 100% client-side reporting tool with zero server dependencies. It means that you can use ActiveReportsJS together with any web framework, including [Express.js](https://expressjs.com/). This article contains a simple yet thorough tutorial on integrating ActiveReportsJS with an Express.js application. By the end, you will be able to do the following:

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

### Prerequisites 

The following content assumes that you have ActiveReportsJS installed on your machine. You can obtain it from the [ActiveReportsJS website](https://www.grapecity.com/activereportsjs/download) if you don't have it. [Node.js](https://nodejs.org/en/) is required to be installed as well. 

### <a id="app"></a>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.

### <a id="data"></a>Add Application Data

In this article, we will be using the [Chinook SQLite database](https://www.sqlitetutorial.net/sqlite-sample-database/). Create the “data” folder in the application's root, and download and unpack the content of the [chinook.zip](https://www.sqlitetutorial.net/wp-content/uploads/2018/03/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 the code that runs the application and initializes 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 using the "node index.js" command and open the **http://localhost:3000/customers** URL in a browser. You can see the customer list in JSON format.

### <a id="report"></a>Create an ActiveReportsJS Report

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

In the [Standalone Report Designer Application](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App), click the **File** menu and select the **Continuous Page Layout** template for a newly created report.  

Open the [Data panel](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#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.

![Chinook](https://files.grapecity.com/gc-website-media/hryhs4zg/01-expressjs.png?width=500&height=381.0316139767055)

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.

![Customers](https://files.grapecity.com/gc-website-media/kbpdtmnm/02-expressjs.png?width=475.5134281200633&height=500)

**Drag and Drop** the Customers dataset from the data panel into the report body. It will automatically create a [Table data region](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table) 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 in the following picture:

![Table design](https://files.grapecity.com/gc-website-media/eivds3dx/03-expressjs.png?width=500&height=207.21271393643033)

Click the **File** menu and save the newly created report in the static folder (it needs to be created) of the application under the name **Customers.rdlx-json**.

### <a id="html"></a>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.

![Customer Report](https://files.grapecity.com/gc-website-media/ys0lgesj/04-expressjs.png?width=500&height=250.52029136316335)