ActiveUI

ActiveUI

  • User Guide
  • Developer Documentation

›Getting Started

About

  • Introduction
  • Changelog

Getting Started

  • Step by Step
  • Development Environment
  • Artifacts
  • ActiveUI Application
  • Usage as an npm Dependency
  • Initialization
  • Project Architecture

Guides

  • Adding Servers
  • Authentication
  • Bookmark favorites
  • Charts
  • Configuring Widget Handlers and Actions
  • Container
  • Custom UI components with Ant Design
  • Data manipulation
  • Debugging
  • Deployment
  • Internationalization
  • MDX Manipulation
  • Plugins
  • Reporting
  • Settings
  • Tabular View and Pivot Tables
  • Testing

Reference

  • SDK API
  • Default Widget Configurations
  • Plugins
  • Settings

Advanced

  • Content Server Setup
  • Experimental Features
  • Maven Integration
  • Offline Installation
  • Script-based Integration

ActiveUI Application

About

This project provides a minimal application based on ActiveUI SDK.

Before you start

You must install the following tools:

  • Node.js the JS engine running the scripts.
  • Yarn for dependency management. We recommend using Yarn instead of npm, but you can use npm if you prefer.

Please find the minimal required versions in package.json.

Scripts

This module was bootstrapped with Create React App and is setup with ESLint and Prettier to help you write clean and consistently formatted code.

The following commands are available:

  • yarn start runs the app in development mode using Create React App's 'start' script.
  • yarn build builds the app for production using Create React App's 'build' script.
  • yarn test launches the tests using Create React App's 'test' script.
  • yarn lint analyses the code for potential errors using ESLint.
  • yarn check-style lists the files that should be reformatted using Prettier.
  • yarn fix-style reformats all files using Prettier.

Additionally, this project is configured with a pre-commit Git hook using husky and lint-staged. This ensures that committed files are in compliance with Prettier and ESLint rules. In the scope of a real-life project however, we recommend replacing such a check with a continuous integration process.

IDE Setup

If you are using VS Code, you can install the ESLint and Prettier plugins and leverage these tools by adopting the following settings:

"eslint.alwaysShowStatus": true, // To get improvements suggestions on the fly.
"eslint.autoFixOnSave": true,    // To automatically improve your code when it can be.
"editor.formatOnSave": true,     // To format automatically.

Dependencies

Besides ActiveUI SDK, this application comes with the following main runtime dependencies:

  • React: a JavaScript library for building user interfaces.
  • Ant Design: a design system and React UI library that contains a set of high quality components for building rich, interactive user interfaces.

Environment-Specific Configuration

After the application is built, you may want to configure the application differently based on which environment it is deployed: e.g. changing the server url or the default settings.

In order to do so without having to re-build the application, this project provides env.*.js files under the public folder that are not bundle within the application. The JavaScript object created in this file will be accessible globally through window.env.

← ArtifactsUsage as an npm Dependency →
Copyright © 2021 ActiveViam