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

This guide will help you set up the ActiveReportsJS Report Viewer component in a Vite.js React application. Vite.js is a modern build tool that leverages native ES modules to optimize the development experience and produce efficient production builds.

1. Create a Vite.js React App

To create a new Vite.js React application, use the create-vite starter kit by running the following command:

# 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

2. Install ActiveReportsJS and Dependencies

Install the ActiveReportsJS React Report Viewer Component and its dependencies with the following command:

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

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

3. Configure Vite.js

To set up ActiveReportsJS in your Vite.js React app, create a new file alias.js in the root folder 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;

Update the vite.config.js file in the root folder with the following content:

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"
        ),
      },
    ],
  },
});

4. Import ActiveReportsJS Styles

Replace the content of src\index.css with the following:

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

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

5. Add an ActiveReportsJS Report

Create a new file named report.rdlx-json in the public folder and add the following JSON content:

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

6. Add the React Report Viewer Component

Replace the content 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;

7. Run and Test the Application

To run the application in development mode, execute the following command:

# npm
npm run dev

#yarn
yarn dev

If you encounter an error stating 'vite' is not recognized as an internal or external command, operable program or batch file, delete the node_modules folder and reinstall the required packages using npm install or yarn. Then run npm run dev or yarn dev again.

When the application starts, the ActiveReportsJS Viewer component will be displayed, showing the text Hello, ActiveReportsJS Viewer. Test the basic functionality using the toolbar buttons or by exporting the report to an available format.