Get Started with ActiveReportsJS Report Viewer in Vite.js(React)

Vite.js is a build tool for modern front-end development. It leverages native ES modules to improve the development experience and to produce a highly optimized production build. This tutorial will show you how to use the ActiveReportsJS Report Viewer component in a Vite.js React application. Currently, ActiveReportsJS only supports Vite v2.x.

Create Vite.js React Application

The easiest way to create a new Vite.js React application is to use the create-vite starter kit. Run the following command from the command prompt or terminal to create an application with default options.

# npm 6.x
npm init vite@2.9.5 arjs-vite-react-app --template react

# npm 7+, extra double-dash is needed
npm init vite@2.9.5 arjs-vite-react-app -- --template react

Install ActivereportsJS npm packages and other dependencies

We distribute the React Report Viewer Component via @grapecity/activereports-react npm package that depends on the main @grapecity/activereports package that includes the core functionality.

To install the current version of these packages, along with the dependencies required for Vite.js to work, run the following command from the application's root folder.

npm install @grapecity/activereports-react

Or if you are using yarn:

yarn add @grapecity/activereports-react

Configure Vite.js

To get ActiveReportsJS working in a Vite.js React application, you need to adjust the Vite.js configuration. Create a new file called alias.js in the root of the application and add the following code:

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

Open the vite.config.js file in the root folder of the application and replace its content with the following:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./alias.js"),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
        ),
      },
      {
        find: /^\@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
        ),
      },
    ],
  },
});

Import ActiveReportsJS styles

Open the src\App.css file and replace its content with the following code.

It imports the default Report Viewer Component Styles and defines style for the element that will hosts the React Report Viewer Component

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

#viewer-host {
  width: 100%;
  height: 100vh;
}

Add ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files.

In the root folder, create a new file called report.rdlx-json and insert the following JSON content into that file.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

Add React Report Viewer component to the application

Replace the default code of src\App.jsx with the following code

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

Run and test the application

To run the application in the development mode, run the following command from the application's root folder:

npm run dev

Or if you are using yarn:

yarn dev

If the command fails with the error that says that 'vite' is not recognized as an internal or external command, operable program or batch file, then delete the node_modules folder and run npm install or yarn to re-install all the required packages. Then run npm run dev or yarn dev again. Note the blazing performance of the application building and the speed of hot module reloading.

When the application starts, the ActiveReportsJS Viewer component will appear on the page. The viewer will display the report that shows Hello, ActiveReportsJS Viewer text. You can test the basic functionality by using buttons on the toolbar or exporting the report to one of the available formats.