Reporting — Create a Vite-Powered Web App

Reporting Team Blog
02 August 2022

In this post, we’ll address the needs of front-end web developers and show you how to use the Vite library to dramatically increase launch/update speed for Javascript client applications.

Vite is a build tool based on a development server that assembles JavaScript code before launching an application. As you may already know, Vite helps reduce load times when making changes and allows you to view results almost instantly.

Vite creates code as ES modules – modules that modern browsers can use to load JavaScript. In the case of large dependencies, Vite pre-bundles these modules to reduce the number of browser requests to the web server. If you are unfamiliar with Vite, be sure to visit the following web page to learn more: Why Vite. The framework-independent nature of Vite allows support for a variety of frameworks, but the most impressive results are for Vue and React. In the following sections, we’ll show you how to add Vite to your DevExtreme-powered React Reporting application.

Create a Sample DevExtreme App

To get started, generate a new application from a template with the DevExtreme CLI:


npx -p devextreme-cli devextreme new react-app devextreme-react-sample --template="typescript"
cd devextreme-react-sample

Add a view for the DevExpress Document Viewer:


npx devextreme add view document-viewer

Add a view for the DevExpress Report Designer:


npx devextreme add view report-designer

Configure the App to Use Vite and DevExpress Reports

First, modify the package.json file:

  1. Add dependencies:

    
    "@devexpress/analytics-core": "^22.1.2",
    "devexpress-reporting": "^22.1.2",
    "jquery-ui-dist": "1.13.1"
    
    
  2. Add devDependencies:

    
    "@vitejs/plugin-react": "^1.3.0",
    "vite": "^2.9.9"
    
    
  3. Replace the scripts section with the following:

    
      "scripts": {
        "start": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "build-themes": "devextreme build",
        "postinstall": "npm run build-themes"
      },
    
    

Then, modify the index.html file:

  1. Move the index.html file from the public folder to the project root folder.
  2. Remove %PUBLIC_URL% strings from the index.html file.
  3. Add entry points to the index.html file:
            
        <body class="dx-viewport">
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script type="module" src="/src/jquery.js"></script>
        <script type="module" src="/src/jquery-ui.js"></script>
        <script type="module" src="/src/index.tsx"></script>
      </body>
        
        
  4. Add the file src/jquery-ui.js with the following content:
    
    			import "jquery-ui-dist/jquery-ui";
        
        
  5. Add the file src/jquery.js with the following content:
    
    import jQuery from "jquery";
    Object.assign(window, { $: jQuery, jQuery })
        
        
  6. Add a vite.config.js file to the root folder with the following content:
    
                import { defineConfig } from 'vite'
                import react from '@vitejs/plugin-react'
    
                // https://vitejs.dev/config/
                export default defineConfig({
                  plugins: [react()],
                  build: {
                    rollupOptions: {
                      treeshake: false
                    }
                  }
                })
        
        

Add the DevExpress Document Viewer and Report Designer Components

Steps to add the Document Viewer

Replace src/pages/document-viewer/document-viewer.tsx file content with the following:


import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
import './document-viewer.scss';

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.viewerRef = React.createRef();
    this.reportUrl = ko.observable("Invoice");
    this.requestOptions = {
      host: "https://localhost:5001/",
      invokeAction: "DXXRDV"
    };
  }
  render() {
    return (<div ref={this.viewerRef} data-bind="dxReportViewer: $data"></div>);
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      requestOptions: this.requestOptions
    }, this.viewerRef.current);
  }
  componentWillUnmount() {
    ko.cleanNode(this.viewerRef.current);
  }
};

export default () => (
  <React.Fragment>
    <h2 className={'content-block'}>Document Viewer</h2>
    <div className={'content-block'}>
      <div className={'dx-card responsive-paddings'}>
        <div style={{ width: "100%", height: "700px" }}>
          <ReportViewer />
        </div>
      </div>
    </div>
  </React.Fragment>
);

Where the following property specifies the report name:


this.reportUrl = ko.observable("Invoice");

and the host one specifies the server-side app address:


host: https://localhost:5001/

Finally, add the following content to the src/pages/document-viewer/document-viewer.scss page:


@import url("../../../node_modules/jquery-ui/themes/base/all.css");
@import url("../../../node_modules/devextreme/dist/css/dx.material.orange.light.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.orange.light.css");
@import url("../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");

Steps to add DevExpress Report Designer

Replace src/pages/report-designer/report-designer.tsx file content with the following:


import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-reportdesigner';
import './report-designer.scss';

class ReportDesigner extends React.Component {
  constructor(props) {
    super(props);
    this.designerRef = React.createRef();
    this.reportUrl = ko.observable("Invoice");
    this.requestOptions = {
      host: "https://localhost:5001/",
      getDesignerModelAction: "/DXXRD/GetDesignerModel"
    };
  }
  render() {
    return (<div ref={this.designerRef} data-bind="dxReportDesigner: $data"></div>);
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      requestOptions: this.requestOptions
    }, this.designerRef.current);
  }
  componentWillUnmount() {
    ko.cleanNode(this.designerRef.current);
  }
};
export default () => (
  <React.Fragment>
    <h2 className={'content-block'}>Report Designer</h2>
    <div className={'content-block'}>
      <div className={'dx-card responsive-paddings'}>
        <div style={{ width: "100%", height: "700px" }}>
          <ReportDesigner />
        </div>
      </div>
    </div>
  </React.Fragment>
);

Where the following property specifies the report name:


this.reportUrl = ko.observable("Invoice");

and the host one specifies the server-side app address:


host: https://localhost:5001/

Thus, add the following content to the src/pages/report-designer/report-designer.scss page to complete this step:


@import url("../../../node_modules/jquery-ui/themes/base/all.css");
@import url("../../../node_modules/devextreme/dist/css/dx.material.orange.light.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.orange.light.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");
@import url("../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css");

Run the Reporting Backend Application

Our web reporting components require a backend application to store and process reports. If you haven’t done this already, you must create an ASP.NET Core application as described in the following help topic: Report Designer Server-Side Configuration (ASP.NET Core).

Run the backend application to determine the address, and specify that address as the host option for the ReportViewer and ReportDesigner components in the src/pages/document-viewer/document-viewer.tsx and src/pages/report-designer/report-designer.tsx files, respectively.

If you have just created a backend application, you will have a TestReport created from the template. Instead of this simple report, you can load one of the reports that ships with our distribution. To load a report, open the Invoice module in our WinForms Reporting demo, switch to the Designer, and save the report as a REPX file. Open the TestReport report in the Visual Studio Report Designer and click Open/Import in the report’s smart tag to load your saved REPX file.

Run the Client App

Make certain that the backend application is running. Navigate to the devextreme-react-sample folder, and execute the following command:


npm install
npm run start

Once complete, the application should appear as follows:

Vite-Powered Reporting App

Your Feedback Matters

As always, we welcome your thoughts.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.