devexpress-examples / reporting-eud-designer-in-javascript-with-react

Report Designer with ASP.NET Core backend.

Reporting for React - How to Integrate the Report Designer in React App

This example shows how to incorporate the Web Report Designer into a client-side app built with React. The example consists of two parts:

• A server (back-end) ASP.NET Core project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.

• A React front-end client application.

Perform the following steps to run this example:

1. Open the back-end project solution (ServerSideApp/ServerSideApp.sln) in Visual Studio and run the project.

2. Navigate to the react-report-designer folder that is the client part's root folder.

3. Open the console and run the following command:

   npm install

4. Run the command to compile and start the client part:

   npm start

5. The client application opens the browser at http://localhost:3000/. It displays the Report Designer with the TestReport report.

Tip

Make sure that the backend application runs on the port specified in the host setting of the Report Designer component. For more information, refer to the following help topic: Determine the Host URL.

Files to Review

• App.js

Documentation

• Report Designer Integration in React

More Examples

• Reporting for Web (React) - Document Viewer.