Add a Web Dashboard to a React Application

• Jan 09, 2025
• 2 minutes to read

This article assumes that you implement a client-server architecture. An ASP.NET Core or an ASP.NET MVC application serves as the backend (server side). The client (frontend) application includes all the necessary styles, scripts and HTML-templates. Note that client scripts, libraries on the server side, and devexpress npm packages should have matching version numbers.

This topic describes how to add the DashboardControl component to a React application and display the Web Dashboard.

View Example

Prerequisites

• Make sure you have Node.js and npm installed on your machine.
• If you are not familiar with the basic concepts and patterns of React, please review the fundamentals before you continue: react.dev

Create a React Application

In the command prompt, create a React application:

npm create vite@latest dashboard-react-app -- --template react

Navigate to the created folder after the project is created:

cd dashboard-react-app

Install the Dashboard Package

Install the following npm packages:

npm install devexpress-dashboard@24.2.5 devexpress-dashboard-react@24.2.5 @devexpress/analytics-core@24.2.5 devextreme@24.2.5 devextreme-react@24.2.5 --save

The devexpress-dashboard npm package references devextreme and @devexpress/analytics-core as peer dependencies. The peer dependencies packages should be installed manually.

Modify App Content

Replace code in the the src/App.jsz file as shown below to display a dashboard component on the page.

import React from 'react';
import 'ace-builds/css/ace.css';  
import 'ace-builds/css/theme/dreamweaver.css';  
import 'ace-builds/css/theme/ambiance.css';  
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css';
import 'devexpress-dashboard/dist/css/dx-dashboard.light.css';
import DashboardControl from 'devexpress-dashboard-react';

function App() {  
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <DashboardControl style={{ height: '100%' }} 
        endpoint="https://demos.devexpress.com/services/dashboard/api">
      </DashboardControl>
  </div>
  );
}

export default App;

The DashboardControlOptions.endpoint property specifies the URL used to send data requests to a server. The value should consist of a base URL where the Web Dashboard’s server side is hosted and a route prefix - a value that is set in the MVC / .NET Core MapDashboardRoute properties.

Run the Application

Run the application.

npm run dev

Open your browser and navigate to the URL specified in the command output to see the result. The Web Dashboard uses data from the preconfigured server (https://demos.devexpress.com/services/dashboard/api). To configure your own server, follow the instructions below:

• Server-Side Configuration (ASP.NET Core)
• Server-Side Configuration (ASP.NET MVC)