Use Visual Studio Template to Create a React Reporting App with Report Designer
- 3 minutes to read
You can use the DevExpress Template Gallery to generate a starter full-stack application with a React frontend and ASP.NET Core backend.
- An ASP.NET Core project that works as an API backend A React project that works as a frontend (includes a Report Designer)
Create a New Project
In Visual Studio, create a new project. Select DevExpress v24.2 Web App Template Gallery as the project template:
Specify the project name and location. Click Create.
Configure the Template
In the Template Gallery, select .NET as the target framework.
Select Reporting React Application. Specify the .NET version and click Create Project.
In the DevExpress ASP.NET Core Project Wizard, activate the Add Designer Page option. This option adds a page with a Web Report Designer to the project.
Deactivate the Add Viewer Page option if you do not need a Web Document Viewer in your application.
You can also specify the following template options:
- Add SQL Data Connection to the Data Source Wizard (applies to Report Designer)
- Creates a sample connection string and register it in the Report Designer. This predefined SQL Data Source appears in Report Wizard and Data Source Wizard.
- Add Sample JSON Data Connection Storage (applies to Report Designer)
- Creates and registers a sample data connection storage to create JSON Data Sources in Report Wizard and Data Source Wizard.
- Add Data Type to Object Data Source Wizard (applies to Report Designer)
- Registers a sample data type to create Object Data Sources in the Report Wizard and Data Source Wizard.
- Enable Rich Text Editor (applies to Report Designer)
- Allows users to edit RichText control content directly on the Report Designer surface.
- Specify Document Cache Storage Type
- Specifies the storage type used as a report document cache. For more information, review the following help topic: Web Document Viewer Cache Management.
- InMemory (default)
- Stores objects directly in memory without serialization. Optimized for frequent operations.
- XPO
- Uses the DevExpress XPO library. Prevents cache data loss in multi-instance applications.
- File
- Stores documents on disk. DistributedCache : Activates cache as an external service. Uses ASP.NET Core distributed caching mechanism that can be shared by multiple application servers.
- Azure
- Configures the application to use Azure caching services.
Run the project to see the result:
Troubleshooting
The following article lists common issues that can occur in a Web Reporting application and describes solutions: Troubleshooting
For information on how to identify the cause of an issue, refer to the following topic: Reporting Application Diagnostics.
What’s Next
- Report Designer Client-Side Configuration
- Integrate the Web Report Designer into your React-based application.
- Enable Rich Text Editor
- Enable inline Rich Text Editor to allow users to edit rich-formatted text in the Web Report Designer.