Add Classic Web Report Designer to a React Boilerplate application

To add the classic Bold Reports^® Report Designer to a React Boilerplate 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:

Follow this getting started section to embed the Bold Reports^® Designer version less than v5.2.xx.

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

To add the Bold Reports^® classic Report Designer to a React Boilerplate 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 classic 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 application. To get started directly with the Bold Reports^® React Boilerplate 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.git
> cd react-boilerplate
> npm install
> npm start

React Boilerplate Application

• Download the React Boilerplate application v4.0.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

To install the Bold Reports^® React package, run the following command in Command Prompt.

npm install @boldreports/react-reporting-components --save-dev

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.js file.

  import jquery from 'jquery';
  import React from 'react';
  import createReactClass from 'create-react-class';
  import ReactDOM from 'react-dom';
  
  window.React = React;
  window.createReactClass = createReactClass;
  window.ReactDOM = ReactDOM;
  window.$ = window.jQuery = jquery;

• Import the globals.js file in the app/app.js file as in the following code snippet:

  /**
   * app.js
   *
   * This is the entry file for the application, only setup and boilerplate
   * code.
   */
  
  import './globals';
  
  // Needed for redux-saga es6 generator support
  import '@babel/polyfill';
  
  // 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,
            },
          }
....
....

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

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

To run the classic Bold Reports^® Report Designer, import the following Report Designer script and style files in the app/app.js 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 source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

....
....

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

const bounds = { height: '800px', width: '100%'};
const render = messages => {
  ReactDOM.render(
    <div style={bounds}>
      <BoldReportDesignerComponent id="reportdesigner_container"  >
      </BoldReportDesignerComponent>
    </div>,
    MOUNT_NODE,
  );
};

....
....

Open the app\index.html file and refer the following scripts in the <head> tag.

<!-- Data-Visualization -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

Create a Web API service

The classic 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.

• ASP.NET Web API Service
• ASP.NET Core Web API Service

Set a Web API service URL

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

....
....

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

//Report designer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

....
....

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

const bounds = { height: '800px', width: '100%'};
const render = messages => {
  ReactDOM.render(
    <div style={bounds}>
       <BoldReportDesignerComponent
            id="reportdesigner_container"
            serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}>
        </BoldReportDesignerComponent>
    </div>,
    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

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