Add a Web Dashboard to a React Application

• Jun 14, 2024
• 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:

npx create-react-app dashboard-react-app

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.1.7 devexpress-dashboard-react@24.1.7 @devexpress/analytics-core@24.1.7 devextreme@24.1.7 devextreme-react@24.1.7 --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

Modify the App.js file as shown below to display a dashboard component on the page:

import React from 'react';
import './App.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.

Add Global Styles

Replace the index.css file content with the following global styles:

@import url("../node_modules/ace-builds/css/ace.css");  
@import url("../node_modules/ace-builds/css/theme/dreamweaver.css");  
@import url("../node_modules/ace-builds/css/theme/ambiance.css");  
@import url("../node_modules/devextreme/dist/css/dx.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

Run the Application

Run the application.

npm start

Open http://localhost:3000/ in your browser to see the result. The Web Dashboard displays the dashboard stored on 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)