Add Web Report Viewer to a React application

To add the Bold Reports^® React Report Viewer to a React application, create a React application, install the @boldreports/react-reporting-components npm package, add the BoldReportViewerComponent, and set a Web API service URL.

To get started quickly with Report Viewer, you can check this video:

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

To add the Bold Reports^® Report Viewer 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 add the Bold Reports^® React Report Viewer, make sure that your development environment includes the following:

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

Install the Create React App package

Create React App is a simple way to create a 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 the Command Prompt.

npm install create-react-app -g

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

Create a new React application

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

create-react-app reports

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

The source code for this React reporting components application is available on GitHub.

Install the Create React Class

To configure the Report Viewer 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 the Command Prompt.

npm install create-react-class --save

Install the Bold Reports^® React package

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

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

Adding scripts reference

Bold Reports^® needs window.jQuery object to render the React components. Hence, create a file named globals.js in the src folder and import jQuery into 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 to the globals.js file in the index.js file, as in the following code snippet:

import './globals';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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 Viewer component to a React app?

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

To run the Bold Reports^® React Report Viewer, import the Report Viewer script and style files into the App.js file.

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

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

function App() {
  return (
    <div style={viewerStyle}>
      <BoldReportViewerComponent
      id="reportviewer-container">
      </BoldReportViewerComponent>
    </div>
  );
}

export default App;

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 create, edit, and browse reports, or you can create one of the following Web API services.

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

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

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 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';

var viewerStyle = {'height': '700px', 'width': '100%'};
  
function App() {
  return (
    <div style={viewerStyle}>
     <BoldReportViewerComponent
     id="reportviewer-container"
     reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
     reportPath = {'~/Resources/docs/sales-order-detail.rdl'} >
     </BoldReportViewerComponent>
    </div>
  );
}
  
export default App;

In the preceding code, the reportServiceUrl is used from an online URL. You can host the Bold Reports^® service at any Azure, AWS, or own domain URL and use it in the Report Viewer. You can view the already created Web API service from the Reporting Service GitHub location.

Run the Application

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

npm run start

While running the preceding command, if you get an error like 'BoldReportViewerComponent' is not defined, disable the 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/.

Deploying the application in production

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

npm run build

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

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.

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.

How do I fix the ‘BoldReportViewerComponent’ is not defined error?

Disable eslint by adding the line /* eslint-disable */ at the top of the App.js file.