Add Web Dashboard to a React Application

  • 2 minutes to read

This approach is based on the client-server model. You need a server (an ASP.NET Core or ASP.NET MVC backend) and a client (frontend) application that includes all the necessary styles, scripts and HTML-templates. Note that the script version on the client should match with libraries version on the server up to a minor version.

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 6+ and npm 5.2+ installed on your machine.
  • Familiarity with basic concepts and patterns of React is required to use this tutorial. Learn basics: reactjs.org

Create 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 Dashboard Package

The devexpress-dashboard npm package references devextreme and @devexpress/analytics-core as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once. The devexpress-dashboard-react package contains the DashboardComponent component.

Install a dashboard package with required peerDependencies:

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

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/jquery-ui/themes/base/all.css");
@import url("../node_modules/devextreme/dist/css/dx.common.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). Follow the instructions below to configure your server:

See Also