Get Started with ActiveReportsJS Report Designer 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 Designer component in a Vite.js React application.

Create a Vite.js React Application

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

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

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

#yarn
yarn create vite arjs-vite-react-app --template react

Install ActivereportsJS npm packages

We distribute the React Report Designer Component via @grapecity/activereports-react NPM package that depends on the @grapecity/activereports package that includes the core functionality. To install the current version of these packages, run the following command from the application's root folder.

# npm
npm install @grapecity/activereports-react@latest

# yarn
yarn add @grapecity/activereports-react@latest

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 application's root folder and add the following code into it:

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;

Then, 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\index.css file and replace its content with the following code.

It imports the default Report Designer Component Styles and defines style for the element that will host the React Report Designer Component

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

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

Add an ActiveReportsJS report into the application

ActiveReportsJS uses the JSON format and the rdlx-json extension for report template files. In the application's public 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 Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

Add the React Report Designer into the application

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

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

function App() {
  return (
    <div id="designer-host">
      <Designer report={{ id: 'report.rdlx-json', displayName: "sample report" }} />
    </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
npm run dev

# 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. The ActiveReportsJS Report Designer will appear on the start page of the application and display the report design. You could test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the Report Designer Interface page for more information on how to use the Report Designer component.