Use .NET CLI Template to Create a React Reporting App with Report Designer

• Dec 04, 2024
• 4 minutes to read

You can use command line interface (CLI) to create a starter full-stack reporting application with a React frontend and an ASP.NET Core backend. The frontend includes a Web Document Viewer and/or Web Report Designer.

Install DevExpress CLI Templates

Execute the following command to install DevExpress ASP.NET Core project templates from nuget.org:

.NET CLI

dotnet new install DevExpress.AspNetCore.ProjectTemplates

If the NuGet.org package source is disabled, you will get the following error: NU1101: Unable to find package DevExpress.AspNetCore.ProjectTemplates. To see the list of sources and their status information, run the command dotnet nuget list source. To enable a source, run the command dotnet nuget enable source <source name>.

If you are new to NuGet, visit the following page for more information about package management prerequisites: An Introduction to NuGet.

Create a Project

To create a React Reporting application with the Web Report Designer, execute the following command:

.NET CLI

dotnet new dx.aspnetcore.reporting.react -n DxReactReportingApp --add-viewer false

The command creates an ASP.NET Core & React Reporting application called DxReactReportingApp in the current directory.

You can use the following parameters to see available command options: -? | -h | --help. For example, execute the following command:

.NET CLI

dotnet new dx.aspnetcore.reporting.react --help

Refer to the following documents for information on template options:

dotnet new command - Options

Standard options for .NET CLI templates.

Template Options

Options specific to the DevExpress React Reporting template.

Run the Project

Navigate to the DxReactReportingApp/DxReactReportingApp.Server folder and use the following command to restore dependencies and run the application:

cd DxReactReportingApp/DxReactReportingApp.Server
dotnet run

Two command prompts appear:

• The ASP.NET Core API project running

• The Vite CLI showing a message as follows:

  VITE v5.4.11  ready in 459 ms
  
  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
  

Open your browser and navigate to the URL specified in the command output to see the result.

Template Options

The following list contains options you can specify when creating DevExpress React Reporting project templates:

-prerelease, --use-prerelease-dx-version

A flag that indicates whether to use a pre-release DevExpress package version in the project.

--framework <TFM>

Specifies the target framework. It expects a target framework moniker (TFM). Example: net8.0.

--dx-version <version>

Specifies DevExpress package version to be used in the project. Examples: 24.2.3, 24.2.*, 24.2.*-*

--dx-nuget-feed <feed>

Specifies the NuGet Feed URL. Refer to nuget.devexpress.com to obtain your personal feed URL (available for registered users).

-ad, --add-designer

Specifies whether to create a web page with the Report Designer.

The default value is true.

-av, --add-viewer

Specifies whether to create a web page with the Document Viewer.

The default value is true.

-ads, --add-data-source

Specifies whether to create a sample connection string and register it in the Report Designer to create SQL Data Sources in the Report Wizard and Data Source Wizard. The connection string is also used to register a predefined data source.

The default value is true.

-ajs, --add-json-data-connection-storage

Specifies whether to create a storage and register it to create JSON Data Sources in the Report Wizard and Data Source Wizard.

The default value is true.

For the storage to work correctly, ensure that the System.Text.Json (default) or Newtonsoft.Json library is installed. Set the DevExpress.DataAccess.Native.Json.JsonLoaderHelper.ProcessingLibrary property to NewtonsoftJson to use the Newtonsoft.Json library.

-ao, --add-data-object

Specifies whether to add a sample data object to an application and register this data object to create Object Data Sources in the Report Wizard and Data Source Wizard.

The default value is false.

-rte, --enable-rich-text-editor

Specifies whether to add an in-line Rich Text Editor for the RichText control.

The default value is false.

-D, --DocumentStorage <InMemory|XPO|...>

Specifies the storage type to cache documents that the report creates. For more information, review the following help topic: Web Document Viewer Cache Management.

InMemoryStorage (default)

Default cache that stores objects directly in memory without serialization, optimized for frequent operations.

XPOStorage

Implements database cache based on the XPO library, designed for multi-instance applications to prevent cache data loss.

FileStorage

Configures the reporting engine to store documents generated by reports on disk instead of in memory.

DistributedCache

Enables cache as external service that uses ASP.NET Core distributed caching mechanism and can be shared by multiple application servers.

AzureStorage

Configures the application to use Azure caching services.

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.