Skip to main content
All docs
V25.1
  • Use DevExpress .NET CLI Templates to Create a React Reporting App with a Document Viewer

    • 4 minutes to read

    You can use the 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.

    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.

    Install DevExpress CLI Templates

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

    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 Document Viewer, execute the following command:

    dotnet new dx.aspnetcore.reporting.react -n DxReactReportingApp --add-designer 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:

    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: 25.1.3, 25.1.*, 25.1.*-*
    --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.