Reporting for React - Add a Web Document Viewer to a React App (Vite)

This example incorporates the Web Document Viewer into a client-side app built with React. The example consists of two parts:

• The ServerApp folder contains the backend project. The project is an ASP.NET Core application that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements custom web report storage.

• The react-document-viewer folder contains the client application built with React.

Quick Start

Server

In the ServerApp folder, run the following command:

dotnet run

The server starts at http://localhost:5000. To debug the server, run the application in Visual Studio.

Client

In the react-document-viewer folder, run the following commands:

npm install
npm run dev

Open your browser and navigate to the URL specified in the command output to see the result. The application displays the Web Document Viewer with the TestReport report.

Files to Review

• App.tsx
• Program.cs
• ReportingControllers.cs

Documentation

• Create a React Application with Web Document Viewer
• Document Viewer Server-Side Configuration (ASP.NET Core)

More Examples

• Reporting for React - Integrate Report Designer in React App
• Reporting for React - Customize Parameter Editor in the Web Document Viewer
• Reporting for React - Customize Viewer Toolbar

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)