Create a React Application with Web Document Viewer (Next.js)

• Jul 20, 2024
• 3 minutes to read

Important

You should be familiar with the basic concepts and patterns of React to use this documentation. If you are not, please refer to the React documentation for a getting-started tutorial.

The Web Document Viewer is used in applications that consist of client and server parts:

Client

A Web Document Viewer integrated in a client React application displays a report provided by the server-side model.

Server

The server is an ASP.NET Core application that handles client data requests and provides access to data sources, report storage, and other backend capabilities.

The tutorial creates and configures a client React application and a server ASP.NET Core backend. The client is created with the help of Next.js and contains the Web Document Viewer control.

View Example

Prerequisites

• Node.js 18.17 or later
• .NET 6 SDK or later
• Visual Studio 2022 (v17.0) or higher

Note the following about versions:

• The script version on the client should match the library version on the server.
• Versions of the DevExpress npm packages should be identical.

Create a Server Application (Back-End)

Refer to the following help topics to create a back-end application:

• Document Viewer Server-Side Configuration (ASP.NET Core)

Create a Client Application (Front-End)

1. In the command prompt, create a React application with Next.js:

   npx create-next-app@latest react-document-viewer
   

2. Navigate to the project folder:

   cd react-document-viewer
   

3. Install the devexpress-reporting-react npm package:

   npm i devexpress-reporting-react@24.1-stable
   

4. Open the app/page.tsx file and substitute its contents with the following code:

   'use client';
   import ReportViewer, { RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';
   
   function App() {
   
     return (
       <ReportViewer reportUrl="TestReport">
         <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
       </ReportViewer>        
     )
   }
   
   export default App
   

   This code snippet declares the ReportViewer component and returns it with the App function.

   Specify the correct server-side port (the host variable) and report name (the reportUrl variable).

5. Open the layout.tsx file and include the following style sheets:

   // ...
   import 'devextreme/dist/css/dx.light.css';
   import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
   import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
   import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';
   // ...
   

Run the Project

1. Run the server application.

   Make sure to specify the correct server-side port (54114 in this example) and report name (TestReport in this example) in the app/page.tsx file.

2. Run the client application:

   npm run dev
   

3. Open the http://localhost:3000/ in your browser to see the result:

   

Troubleshooting

You may encounter the following problems:

Page is blank

The Document Viewer page is blank. The following error message is displayed at the bottom of the page:

Could not open report ‘TestReport’

Check the following:

• The backend application is up and running.
• The backend application runs on the port specified in the host setting of the Document Viewer component.
• The application’s URI is compliant with the CORS policy specified in your backend application.
• The reportUrl setting value matches an existing report. For the backend application, make sure that the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the backend application originated from the DevExpress template).
• The version of DevExpress npm packages should match the version of NuGet packages. Enable Development Mode to check for library version mismatch on every request to the server. For more information, refer to the following topic: Server-Side Libraries Version.

Refer to the following topic for more information: Troubleshooting.