BuyLog In
Example T828553
Visible to All Users

Dashboard for React - Get Started

This project demonstrates how you can incorporate a DevExpress Dashboard component into a client-side app built with React. Use it as a template when you need to create a similar web application.

The example uses a modular client-server approach. The server (backend) project communicates with the client (frontend) application that includes all the necessary styles, scripts and HTML templates. Note that the script version on the client must match the version of libraries on the server.

Quick Start

Server

In the asp-net-core-server folder run the following command:

Code
dotnet run

The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's endpoint property according to the listening port: https://localhost:44307/api/dashboard.

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origins with any scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: Cross-Origin Resource Sharing (CORS)

Client

In the dashboard-react-app folder, run the following commands:

Code
npm install  
npm run dev

Open the address shown in console in your browser to see the result.

Files to Review

Documentation

Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

dashboard-react-app/src/App.jsx 
Code
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="http://localhost:5000/api/dashboard">
      </DashboardControl>
  </div>
  );
}

export default App;
asp-net-core-server/Program.cs 
C#
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb.Native;
using DevExpress.DashboardWeb;
using Microsoft.Extensions.FileProviders;
using DevExpress.AspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DataAccess.Json;

var builder = WebApplication.CreateBuilder(args);

IFileProvider? fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration? configuration = builder.Configuration;

// Configures CORS policies.                
builder.Services.AddCors(options => {
    options.AddPolicy("CorsPolicy", builder => {
        builder.AllowAnyOrigin();
        builder.AllowAnyMethod();
        builder.WithHeaders("Content-Type");
    });
});

// Adds the DevExpress middleware.
builder.Services.AddDevExpressControls();
// Adds controllers.
builder.Services.AddControllersWithViews();

// Configures the dashboard backend.
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
    DashboardConfigurator configurator = new DashboardConfigurator();
    configurator.SetDashboardStorage(new DashboardFileStorage(fileProvider.GetFileInfo("Data/Dashboards").PhysicalPath));
    configurator.SetDataSourceStorage(CreateDataSourceStorage());
    configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
    configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
    return configurator;
});

void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
    if (e.ConnectionName == "jsonSupport") {
        Uri fileUri = new Uri(fileProvider.GetFileInfo("Data/support.json").PhysicalPath, UriKind.RelativeOrAbsolute);
        JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
        jsonParams.JsonSource = new UriJsonSource(fileUri);
        e.ConnectionParameters = jsonParams;
    }
    if (e.ConnectionName == "jsonCategories") {
        Uri fileUri = new Uri(fileProvider.GetFileInfo("Data/categories.json").PhysicalPath, UriKind.RelativeOrAbsolute);
        JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
        jsonParams.JsonSource = new UriJsonSource(fileUri);
        e.ConnectionParameters = jsonParams;
    }
}

DataSourceInMemoryStorage CreateDataSourceStorage() {
    DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();

    DashboardJsonDataSource jsonDataSourceSupport = new DashboardJsonDataSource("Support");
    jsonDataSourceSupport.ConnectionName = "jsonSupport";
    jsonDataSourceSupport.RootElement = "Employee";
    dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSourceSupport.SaveToXml());

    DashboardJsonDataSource jsonDataSourceCategories = new DashboardJsonDataSource("Categories");
    jsonDataSourceCategories.ConnectionName = "jsonCategories";
    jsonDataSourceCategories.RootElement = "Products";
    dataSourceStorage.RegisterDataSource("jsonDataSourceCategories", jsonDataSourceCategories.SaveToXml());
    return dataSourceStorage;
}

var app = builder.Build();

// Registers the DevExpress middleware.            
app.UseDevExpressControls();

// Registers routing.
app.UseRouting();
// Registers CORS policies.
app.UseCors("CorsPolicy");

// Maps the dashboard route.
app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
// Requires CORS policies.
app.MapControllers().RequireCors("CorsPolicy");

app.Run();

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.