How to Use a Javascript Reporting Tool With the Gatsby Web Framework
Tags: javascript, webdev, tutorial, devops
Published: 2022-09-16 18:34:55

---
canonical_url: https://www.grapecity.com/blogs/how-to-use-javascript-reporting-tool-with-the-gatsby-web-framework
description: Learn How to Use a Javascript Reporting Tool with the Gatsby web framework. 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 [Gatsby](https://www.gatsbyjs.com/). This article contains a simple yet thorough tutorial on integrating ActiveReportsJS with a Gatsby application. By the end, you will be able to do the following:

*   [Create a new Gatsby application](#create)
*   [Source the data from a SQLite database](#add)
*   [Create an ActiveReportsJS report to visualize the data from the GraphQL API](#report)
*   [Create client-side routing to host the ActivReportsJS Report Viewer component](#component)

### 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.

### <a id="create"></a>Create a Gatsby Application

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

```
    # with npm v6.1+
    npm init gatsby

    # with npx(included by default with npm v5.2+)
    npx create-gatsby

    # with yarn
    yarn create gatsby
```

It asks for a site title, the name of the project’s directory, and other features. Here is the sample of responses:

```
    What would you like to name the folder where your site will be created?
    √ ARJS/ gatsby-reporting
    √ Will you be using JavaScript or TypeScript?
    · TypeScript
    √ Will you be using a CMS?
    · No (or I'll add it later)
    √ Would you like to install a styling system?
    · Sass
    √ Would you like to install additional features with other plugins?No items were selected
```

Then open the newly created "gatsby-reporting" folder in your favorite code editor, such as Visual Studio Code.

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

Gatsby framework can [load the data](https://www.gatsbyjs.com/docs/how-to/sourcing-data/) from practically anywhere. In this article, we will be using the Chinook SQLite database. You can find its description [here](https://www.sqlitetutorial.net/sqlite-sample-database/). Download and unpack the content of the [chinook.zip](https://www.sqlitetutorial.net/wp-content/uploads/2018/03/chinook.zip) file into the "data" folder of the newly created Gatsby application.

Install the "gatsby-source-sqlite" package by running the following command from the terminal or command prompt.

```
    # with npm
    npm i gatsby-source-sqlite

    # with yarn
    yarn add gatsby-source-sqlite
```

Open the "gatsby-config.ts" file that resides in the root folder of the application and add the following object into the "plugins" array:

```
    {
      resolve: `gatsby-source-sqlite`,
      options: {
        fileName: "./data/chinook.db",
        queries: [
          {
            statement: "SELECT CustomerId, FirstName, LastName, Country FROM customers",
            idFieldName: "CustomerId",
            name: "customers"
          },
        ],
      },
    }
```

Run the website locally using the "npm run develop" or "yarn develop" command and open the [http://localhost:8000/___graphql](http://localhost:8000/___graphql) URL in a browser. You can see the "customers" query is available via a GraphQL API.

![Gatsby](https://files.grapecity.com/gc-website-media/c53jne1b/01-gatsby.png?width=500&height=250.26041666666669)

### <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:8000/___graphql](http://localhost:8000/___graphql) for the **ENDPOINT** field, add the "Content-Type" HTTP Header and set its value to "application/json" and finally and click the **Save Changes** button.

![Edit Data Source](https://files.grapecity.com/gc-website-media/y3zn3fmw/02-gatsby.png?width=500&height=457.64119601328906)

Click the **+** icon near **DataSource** in the Data panel.  

In the **Data Set Editor** dialog:

*   Type _Customers_ in the NAME field
*   Select the _HTTP Post_ method
*   Type _{"query":"{ allSqliteCustomers { edges { node { CustomerId, FirstName, LastName, Country } } } }"}_ for the POST Body
*   Type _$.data.allSqliteCustomers.edges.*_ for the JSON Path
*   Click the **Validate** button, ensure that the Database Fields section displays the **[4 items]** text, and click the **Save Changes **button

![Customers](https://files.grapecity.com/gc-website-media/zljpj3gq/03-gatsby.png?width=399.734395750332&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, adjust its name to be readable, 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:

![CustomerID](https://files.grapecity.com/gc-website-media/ejalxhv1/04-gatsby.png?width=500&height=133.86308068459658)

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

### <a id="component"></a>Create a Client-Side Component and Routing to Display Reports

ActiveReportsJS is a 100% client-side reporting solution that runs reports in a browser and needs access to the browser's Web API. Therefore, ActiveReportsJS code can't run correctly on the server-side or at building time. To fulfill this requirement, we can use [client-only routing](https://www.gatsbyjs.com/docs/how-to/routing/client-only-routes-and-user-authentication/).

But first, we need to install the ActiveReportsJS npm packages. Stop the application and run the following command from a terminal or command prompt.

```
    # with npm
    npm install @grapecity/activereports-react

    # with yarn
    yarn add @grapecity/activereports-react
```

Then create a new folder called "Components" in the "src" folder of the application and the reporting.tsx file with the following content into it.

```
    import * as React from 'react';
    import {Viewer} from "@grapecity/activereports-react";
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-viewer.css";

    const Reporting = ({reportUri}:{reportUri:string}) => {
      return (
        <div style={{width:"100%", height: "100vh"}}>
            <Viewer report={{ Uri: reportUri }} />
        </div>
      )
    }

    export default Reporting;
```

Rename the "index.tsx" in the "pages" folder of the application to **[**[**...**])**].tsx ** and insert the following content into it:

```
    import * as React from "react";
    import { Router} from "@reach/router";
    import Reporting from "../components/reporting";

    // markup
    const IndexPage = () => {
      return (
        <Router>
          <Reporting reportUri="static/Customers.rdlx-json" path="/" />
        </Router>
      );
    };

    export default IndexPage;
```

Run the website locally using the "npm run develop" or "yarn develop" command and open the [http://localhost:8000](http://localhost:8000/___graphql) URL in a browser. The report viewer will display the "Customers" report.

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

If you want to parametrize reports, please read the article about data binding: [How to implement dynamic data binding with ActiveReportsJS. ](/blogs/how-to-use-implement-dynamic-data-binding-with-activereportsjs)