Add Classic Web Report Designer to a React application

To add the classic Bold Reports^® React Report Designer to a React application, install the Bold Reports^® React package, refer the Report Designer scripts and styles, and set 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.

To get started quickly with the classic Report Designer, watch the following video.

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

To add the Bold Reports^® classic Report Designer to a React 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 your development environment includes the following:

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

Install the Create React App package

Create React App is a simple way to create single-page React application which provides a build setup with no configuration. To install the Create React App globally in your machine, run the following command in Command Prompt.

npm install create-react-app -g

To learn more about the Create React App package, see the Create React App documentation.

Create a new React application

To create a new React application, run the following command in Command Prompt.

create-react-app reports

The create-react-app command adds the react, react-dom, react-scripts, and other dependencies required to your React application.

Install the Create React Class

To configure the Report Designer component, change the directory to your application’s root folder.

 cd reports

To install the type definitions for create-react-class, run the following command in Command Prompt.

npm install create-react-class --save

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

Adding scripts reference

Bold Reports^® needs window.jQuery object to render the React components. Create a file named globals.js and import jQuery in the globals.js file as in the following code snippet:

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;

Refer the globals.js file in the index.js file as in the following code snippet:

React (Version 17x or lesser)

React (Version 18x)

import './globals';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//serviceWorker will show warning "unused".
//import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

import './globals';
import React from 'react';
import {{ createRoot }} from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

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

You add the Bold Reports^® classic Report Designer component to a React app by importing the Report Designer script and style files into the App.js file.

To run the classic Bold Reports^® Report Designer, import the following Report Designer script and style files in the App.js file.

/* eslint-disable */
import React from 'react';
import './App.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';

var designerStyle = {
  'height': '700px',
  'width': '100%'
};

function App() {
  return (
    <div style={designerStyle}>
            <BoldReportDesignerComponent
            id="reportdesigner_container">
            </BoldReportDesignerComponent>
    </div>
  );
}

export default App;

Open the public\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.

Set a Web API service URL

To set a Web API service, open the App.js file and replace the existing code with the following code snippet:

/* eslint-disable */
import React from 'react';
import './App.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';

var designerStyle = {
  'height': '700px',
  'width': '100%'
};

function App() {
  return (
    <div style={designerStyle} className="App">
            <BoldReportDesignerComponent
            id="reportdesigner_container"
            serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}>
            </BoldReportDesignerComponent>
    </div>
  );
}

export default App;

In the previous code, the serviceUrl uses the online URL. You can host the Bold Reports^® service on any Azure, AWS or your own domain URL and use it in the Report Designer. View the already created Web API service in the Reporting Service GitHub location.

Run the Application

To run the application, run the following command in command prompt.

npm run start

If you get an error like 'BoldReportDesignerComponent' is not defined when you run the previous command, disable eslint by adding the line /* eslint-disable */ at the top of App.js.

The npm run start command automatically opens your browser to http://localhost:3000/ 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

Note: You can refer to our feature tour page for the React Report Designer to see its innovative features. Additionally, you can view our React Report Designer examples which demonstrate the rendering of SSRS RDLC and RDL reports.