Create a React Front-End Application with a Document Viewer (Vite)

• Mar 24, 2025
• 5 minutes to read

Important

Familiarity with React basic concepts and patterns is essential prior to the use of this documentation. If you require a review, please refer to React documentation for a getting-started tutorial

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

ClientA Web Document Viewer integrated in a client React application displays a report provided by the server-side model.ServerThe server is an ASP.NET Core application that handles client data requests and provides access to data sources, report storage, and other back-end capabilities.

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

View Example

Tip

You can also use our DevExpress project templates to create a React Reporting application:

• Use DevExpress Visual Studio Templates to Create a React Reporting App with a Document Viewer
• Use DevExpress .NET CLI Templates to Create a React Reporting App with a Document Viewer

Prerequisites

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

Note the following details about package versions:

• The script version on the client should match the library version on the server.
• DevExpress npm package versions should be identical.

Create a Server Application (Back-End)

Use the DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. Begin with the steps below:

1. Install DevExpress ASP.NET Core project templates from nuget.org:

2. Create a back-end Reporting application for a Document Viewer:

3. Enable cross-origin requests (CORS). Specify the policy that allows any local application to access the report’s back-end. Use the SetIsOriginAllowed method to set it up.

4. To run the server-side application, run the following command:

Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in Visual Studio, review the following help topics:

• Document Viewer Server-Side Application (ASP.NET Core)
• Document Viewer’s Server-Side Configuration (ASP.NET MVC)

Create a Client Application (Front-End)

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

2. Navigate to the project folder:

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

4. Open the src/App.tsx file and substitute its contents with the following code excerpt:

5. Remove default project styles to avoid conflicts. To do this, remove the index.css import in main.tsx.

Run the Project

1. Run the server application.

2. Run the client application:

3. Open your browser and navigate to the URL specified in the command output 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 back-end application.
• The reportUrl setting value matches an existing report. For the backend application, ensure that either the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the back-end 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 a library version mismatch on every request to the server. For details, review the following help topic: Server-Side Libraries Version.

Refer to the following topic for more information: Troubleshooting.

Next Steps

Specify Parameter ValuesSpecify Parameter Values through the Document Viewer’s UI or code.Customize the ToolbarCustomize the Document Viewer Toolbar: hide export formats, customize toolbar commands.Customize the Tab Panel Customize the Document Viewer Tab Panel: remove the Tsb Panel, add new tabs to the Panel. Customize Parameter Editor : Customize a standard parameter editor in the Web Document Viewer. See Also

Vite