Add Web Report Viewer to a React Boilerplate application

To add the Bold Reports^® Report Viewer to a React Boilerplate TypeScript application, install the Bold Reports^® React package, add the global scripts, configure webpack, add the BoldReportViewerComponent, and set a Web API service URL.

What do I need before adding the Report Viewer to a React Boilerplate TypeScript app?

To add the Bold Reports^® Report Viewer to a React Boilerplate TypeScript app, your development environment needs Node JS (version 8.x or 10.x) and NPM (v3.x.x or higher).

Before you add the Bold Reports^® React Report Viewer, make sure that you have the following requirements.

Node JS (version 8.x or 10.x)
NPM (v3.x.x or higher)

To quick start with React Boilerplate application, we have already configured our Bold Reports^® with React Boilerplate TypeScript application. Execute the following commands to get started with the Bold Reports^® React Boilerplate TypeScript application.

Note: If you use a version above Bold Reports v5.2.X, update the following 3 package versions in the packages.json file before executing the npm install command. “react”: “17.0.1”,“react-dom”: “17.0.1”,“react-test-renderer”: “17.0.1”

> git clone https://github.com/boldreports/react-boilerplate-typescript.git
> cd react-boilerplate
> npm install
> npm start

React Boilerplate TypeScript Application

Download the React Boilerplate TypeScript application archive and extract it.
From the extracted folder, execute the following command to install project dependencies.

npm install

Install the Bold Reports^® React package

Run the following commands to install the Bold Reports^® React library.

React version	NPM package installation
greater than 16	npm install @boldreports/react-reporting-components@latest —save-dev
16 or less than 16 (Warning: This version may have compatibility limitations with newer React features.)	npm install @boldreports/[email protected] —save-dev

Note: Using the latest package with React 16 may cause compilation issues. Make sure to install the correct version to avoid problems.

Also, install the create-react-class package, which is required by the Bold Reports^® React package.

npm install create-react-class --save-dev

Adding global scripts reference

Bold Reports^® requires global jquery, React, createReactClass, and ReactDOM objects to render the Report components, so import and assign those to the window object in a newly created app/globals.ts file.

import jquery from 'jquery';
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';

(window as any).React = React;
(window as any).createReactClass = createReactClass;
(window as any).ReactDOM = ReactDOM;
(window as any).$ = (window as any).jQuery = jquery;

Import the globals.ts file into the app/app.tsx file, as in the following code snippet:

/**
 * app.tsx
 *
 * This is the entry file for the application, only setup and boilerplate
 * code.
 */

import './globals';

// Needed for redux-saga es6 generator support
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// Import all the third party stuff
....
....

Configuring webpack

Bold Reports^® uses cur type files, so add support for loading this file type in the webpack url-loader plugin by configuring the internals/webpack/webpack.base.babel.js file.

....
....
        test: /\.(jpg|png|gif|cur)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
            },
          }
....
....

Also, change the image quality in image-webpack-loader from 65-90 to [0.65, 0.90].

....
....
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false,
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 7,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
            },
          }
....
....

How do I add the Report Viewer component to a React Boilerplate TypeScript app?

You add the Bold Reports^® Report Viewer component to a React Boilerplate TypeScript app by importing the Report Viewer script and style files into the app/app.tsx file and rendering it with the BoldReportViewerComponent tag.

To run the Bold Reports^® React Report Viewer, import the following Report Viewer script and style files into the app/app.tsx file. Then, use the BoldReportViewerComponent tag to render the viewer in the application.

....
....

import history from 'utils/history';
import 'sanitize.css/sanitize.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

....
....

declare let BoldReportViewerComponent: any;

const MOUNT_NODE = document.getElementById('app') as HTMLElement;

const bounds = { height: '800px', width: '100%'};

const ConnectedApp = (props: { messages: any }) => (
  <div style={bounds}>
      <BoldReportViewerComponent id="reportviewer-container"  >
      </BoldReportViewerComponent>
    </div>
);

const render = (messages: any) => {
  ReactDOM.render(<ConnectedApp messages={messages} />, MOUNT_NODE);
};

....
....

Create a Web API service

The Bold Reports^® React Report Viewer requires a Web API service to process the data and file actions. You can skip this step and use our online Web API services to browse reports, or you can create one of the following Web API services.

To load the report directly from SQL Server Reporting Services (SSRS), skip the following steps and go to the SSRS Report.

Set a Web API service URL

Bind an online reportServiceUrl to the Bold Reports^® Report Viewer component in the app/app.tsx file, as in the following snippet.

....
....

import history from 'utils/history';
import 'sanitize.css/sanitize.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

....
....

declare let BoldReportViewerComponent: any;

const MOUNT_NODE = document.getElementById('app') as HTMLElement;

const bounds = { height: '800px', width: '100%'};

const ConnectedApp = (props: { messages: any }) => (
  <div style={bounds}>
      <BoldReportViewerComponent
            id="reportviewer-container"
            reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
            reportPath = {'~/Resources/docs/sales-order-detail.rdl'} >
      </BoldReportViewerComponent>
    </div>
);

const render = (messages: any) => {
  ReactDOM.render(<ConnectedApp messages={messages} />, MOUNT_NODE);
};

....
....

Run the Application

To run the application, execute the following command and browse to http://localhost:3000 to see the application.

npm start

report viewer output

Deploying the application in production

To deploy the application in production, run the following command at the command prompt, which will create a folder named build to generate the build files.

npm run build

Frequently asked questions

Which npm package do I install for the React Report Viewer?

Install @boldreports/react-reporting-components@latest for React versions greater than 16, or @boldreports/[email protected] for React 16 or earlier. Also install the create-react-class package.

Does the React Report Viewer need a Web API service?

Yes. The Bold Reports^® React Report Viewer requires a Web API service to process data and file actions. You can use the online Web API services or create an ASP.NET or ASP.NET Core Web API service.

Why do I configure webpack in the React Boilerplate TypeScript application?

Bold Reports^® uses cur type files, so you configure the webpack url-loader plugin in internals/webpack/webpack.base.babel.js to load them.