Use DevExpress Visual Studio Templates to Create a React Reporting App with a Document Viewer
- 3 minutes to read
Use the DevExpress Template Gallery to generate a starter full-stack application with a React frontend and ASP.NET Core backend.
This topic creates a Reporting application that contains the following projects:
- An ASP.NET Core project that works as an API backend
- A React project that works as a frontend (includes a Document Viewer)
Note
We implemented a new dotnet CLI-powered Project Wizard you can use across multiple IDEs. The new wizard suggests additional templates: Cross-IDE Project Template Kit.
Create a New Project
In Visual Studio, create a new project. Select DevExpress v25.1 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 Viewer Page option. This option adds a page with a Document Viewer to the project.
Deactivate the Add Designer Page option if you do not require a Web Report Designer 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
- Document Viewer Client-Side Configuration
- Integrate the Web Document Viewer into your React-based application.
- Customize the Toolbar
- Customize the Toolbar in the Web Document Viewer.
- Customize the Tab Panel
- Customize the Tab Panel in the Web Document Viewer.
- Customize Parameter Editor
- Customize a standard parameter editor in the Web Document Viewer.