Add Web Report Designer to a React Boilerplate application

To add the Bold Reports^® Report Designer version higher than v5.2.xx to a React Boilerplate TypeScript application, install the Bold Reports^® React package, configure webpack, and add the Report Designer component with a Web API service URL. Use the following steps.

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

To add the Bold Reports^® Report Designer 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 get started with the Bold Reports^® Report Designer, make sure that you have the following requirements.

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

To start quickly with a React Boilerplate application, use the preconfigured Bold Reports^® with React Boilerplate TypeScript application. To get started directly with the Bold Reports^® React Boilerplate TypeScript application, run the following commands.

Note: If you use a version above Bold Reports v5.2.X, update the following 3 package versions in the packages.json file before you run 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 v4.1.0 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 create-react-class package, which is required by 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. Import and assign them 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 in 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 configure the internals/webpack/webpack.base.babel.js file to load this file type in the webpack url-loader plugin.

....
....
        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 Designer component to a React Boilerplate TypeScript app?

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

To run the Bold Reports^® Report Designer, import the following Report Designer script and style files in the app/app.tsx file. Then use the BoldReportDesignerComponent tag to render the Report Designer in the application.

....
....

import history from 'utils/history';
import 'sanitize.css/sanitize.css';

//Report Designer component styles
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css';
//Report Designer component dependent scripts
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';
//Report Viewer and Designer component scripts
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

....
....

declare let BoldReportDesignerComponent: any;

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

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

const ConnectedApp = (props: { messages: any }) => (
  <div style={bounds}>
      <BoldReportDesignerComponent id="reportdesigner_container"  >
      </BoldReportDesignerComponent>
    </div>
);

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

....
....

Create a Web API service

The Bold Reports^® React Report Designer requires a Web API service to process the data and file actions. You can skip this step and use our online Web API service at https://demos.boldreports.com/services/api/ReportingAPI to create, edit, and browse reports. Otherwise, create one of the following Web API services.

Set a Web API service URL

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

....
....

import history from 'utils/history';
import 'sanitize.css/sanitize.css';

//Report Designer component styles
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css';
//Report Designer component dependent scripts
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';
//Report Viewer and Designer component scripts
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

....
....

declare let BoldReportDesignerComponent: any;

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

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

const ConnectedApp = (props: { messages: any }) => (
  <div style={bounds}>
      <BoldReportDesignerComponent
            id="reportdesigner_container"
            serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}>
      </BoldReportDesignerComponent>
    </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 designer output

Deploying the application in production

To deploy the application in production, run the following command in the command prompt. The command creates a folder named build that contains the build files.

npm run build

Frequently asked questions

Which npm package does the React Report Designer need?

The Bold Reports^® React Report Designer needs the @boldreports/react-reporting-components package. Install the latest version for React versions greater than 16, and version 5.3.8 for React 16 or earlier.

Do I need to create my own Web API service?

No. You can use the online Web API service at https://demos.boldreports.com/services/api/ReportingAPI to create, edit, and browse reports, or create an ASP.NET or ASP.NET Core Web API service.

Why do I need to configure webpack for React Boilerplate?

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