Client-Side Configuration (React)

• Apr 01, 2019
• 3 minutes to read

This approach is based on the client-server model. This requires a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

The modular approach allows you to integrate the HTML JavaScript Dashboard control into web applications. This topic describes how to add the HTML JavaScript Dashboard control to a React application.

Tip

Get Started: Build Web Dashboard Applications

• Prerequisites
• Create React Application
• Install Dashboard Package
• Create Dashboard Component
• Modify App Content
• Add Global Styles
• Add Rewired Config
• Run the Application

Prerequisites

Make sure you have Node.js 6+ and npm 5.2+ installed on your machine.

Create React Application

In the command prompt, create a React application and navigate to the created folder:

npx create-react-app dashboard-react-app
cd dashboard-react-app

Install Dashboard Package

Install a dashboard package:

npm install devexpress-dashboard --save

Create Dashboard Component

In the src folder, create a DashboardComponent.js file and add the content below:

import React from 'react';
import { DashboardControl, ResourceManager, DashboardPanelExtension } from 'devexpress-dashboard';
import Globalize from 'globalize'

class DashboardComponent extends React.Component {
    constructor(props) {
        super(props);

        this.initGlobalize();
        ResourceManager.embedBundledResources();
    }

    componentDidMount() {
        this.dashboardControl = new DashboardControl(this.refs.dashboardcontainer,  {          
            endpoint: "https://demos.devexpress.com/services/dashboard/api",
            workingMode: "Designer",
        });
        this.dashboardControl.registerExtension(new DashboardPanelExtension(this.dashboardControl));
        this.dashboardControl.render();
    }

    componentWillUnmount() {
        this.dashboardControl.dispose();
    }

    render() {
        return (
            <div ref="dashboardcontainer" style={{ width: '100%', height: '100%' }}></div>
        );
    }

    initGlobalize() {
    Globalize.load(
        require('devextreme-cldr-data/en.json'),
        // require('devextreme-cldr-data/de.json'), 
        require('devextreme-cldr-data/supplemental.json')
    );
    Globalize.locale('en');
    }
}

export default DashboardComponent;

The DashboardControlOptions.endpoint property value consists of the URL where the Web Dashboard’s server side is hosted and the route prefix from the server side. Web Dashboard uses the globalize library to display culture-specific data.

Modify App Content

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

import React, { Component } from 'react';
import DashboardComponent from './DashboardComponent';

class App extends Component {
    render() {
        return (
        <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
            <DashboardComponent />
        </div>
        );
    }
}

export default App;

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");

Add Rewired Config

1. Install the react-app-rewired library to customize CRA and its Webpack config without ejecting.

npm install react-app-rewired

2. Create a config-overrides.js file at the root of your application and add the following content:

var path = require('path');

module.exports = function override(config, env) {
    config.resolve.alias = {
    globalize$: path.resolve(__dirname, 'node_modules/globalize/dist/globalize.js'),
    globalize: path.resolve(__dirname, 'node_modules/globalize/dist/globalize'),
    cldr$: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr.js'),
    cldr: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr')
    };
    return config;
}

3. Open package.json and modify the scripts section as shown below:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

Run the Application

Run the application.

npm start

Open http://localhost:3000/ in your browser to see the result. The HTML JavaScript Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api).