Report Designer Integration (Node.js Package Manager)

• Mar 24, 2025
• 6 minutes to read

You can use the End-User Web Report Designer in a JavaScript application. You should create two projects:

• A server (backend) project
• A client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Server (Backend) Part

Use the DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. Begin with the steps below:

1. Install DevExpress ASP.NET Core project templates from nuget.org:

2. Create a back-end Reporting application:

3. Enable cross-origin requests (CORS). Specify the policy that allows any local application to access the report’s back-end. Use the SetIsOriginAllowed method to set it up.

4. To run the server-side application, run the following command:

Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in Visual Studio, review the following help topics:

• Report Designer Server-Side Application (ASP.NET Core)
• Report Designer’s Server-Side Configuration (ASP.NET MVC)

Client (Frontend) Part

The following steps create the client part, install the required npm packages and create a bundle with Webpack:

1. Install Node.js and npm if they do not exist on your machine.

2. Install the Webpack CLI globally with the following commands:

3. Create a folder for a client-side project. In this example, the folder’s name is ClientSide.

4. Add a package.json configuration file to the created folder and list the following third-party packages the Web Report Designer requires:

5. Navigate to your folder, open the console and run the command below to install packages:

6. Create a webpack.config.js file and specify configuration settings as shown below. Define the index.js file as the bundle’s entry point (this file is created later) and the bundle.js file as the output file.

7. Create a View file (the index.html file in this example) and specify this View’s HTML template. In the body section, use the dxReportDesigner binding with the designerOptions parameter and link the bundle script file (bundle.js) specified in the previous step.

8. Add a new JavaScript file (index.js) to provide data to the View. Link the required modules, create a designerOptions variable and activate the Knockout bindings.

9. Create a new style.css file with the following content:

10. Run the following command to create the bundle:

11. Host your client-side part on the web server.

12. For the example to work correctly, you should first run a backend project in Visual Studio, and then, run a client part.

Troubleshooting

When you start the application, you may encounter the following problems:

Page Is Blank

The Report Designer page is blank. The following error message is displayed at the bottom of the page: The page is blank because the Report Designer failed to load the report. Consult the developer for assistance. Use development mode for detailed information.

Check the following:

• The backend application is up and running.
• The specified controller action path matches the back-end application type. If you use the ASP.NET Core backend, specify the /DXXRD/GetDesignerModel path; if you use the ASP.NET MVC backend, specify the /ReportDesigner/GetReportDesignerModel path.
• The backend application runs on the port specified in the host setting of the Report Designer component.
• The application’s URI satisfies the CORS policy specified in your back-end application.
• The reportUrl value matches an existing report. For the back-end application, ensure that either the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the back-end application originated from the DevExpress template).
• The version of DevExpress npm packages should match the version of NuGet packages. Enable Development Mode to check for library version mismatch on every request to the server. For details, review the following help document: Server-Side Libraries Version.

Refer to the following help topic for more information: Troubleshooting.