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.
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 startruns the app in development mode using Create React App's 'start' script.
yarn buildbuilds the app for production using Create React App's 'build' script.
yarn testlaunches the tests using Create React App's 'test' script.
yarn check-stylelists the files that should be reformatted using Prettier.
yarn fix-stylereformats all files using Prettier.
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.
Besides ActiveUI SDK, this application comes with the following main runtime dependencies:
- Ant Design: a design system and React UI library that contains a set of high quality components for building rich, interactive user interfaces.
A Cypress setup is available, allowing you to add end-to-end tests to the application. Two commands are available to run the tests:
yarn test-e2eruns all tests headlessly in an Electron browser.
yarn test-e2e-debugopens an interactive window allowing you to choose which test(s) you want to run.
An example test is available in
cypress/support/addLoginCommand.js, you will find an example of a custom Cypress command to login into the application.
To run the existing test, you will first need to specify your server url, as well as the application credentials as environment variables in
You can configure your ActivePivot URL and others through environment variables, query parameters, or variables defined on window.
url- Can be used to override all other server URLs.
activePivotServerUrl- ActivePivot server URL.
activeMonitorServerUrl- ActiveMonitor server URL.
contentServerUrl- Content server URL.
REACT_APP_ACTIVE_PIVOT_SERVER_URL- ActivePivot server URL.
REACT_APP_ACTIVE_MONITOR_SERVER_URL- ActiveMonitor server URL.
REACT_APP_CONTENT_SERVER_URL- Content server URL.
Variables on Window
In some situations you may be required to deploy a single build to different environments and have it target different URLs.
In this case the URL must be defined at runtime.
There are two builtin ways to accomplish this. One is using query parameters.
The other is using
.js files that are not compiled, and are served directly.
For this app you can define Environment variables within the
env.*.js files under
window.env.activePivotServerUrl- ActivePivot server URL.
window.env.activeMonitorServerUrl- ActiveMonitor server URL.
window.env.contentServerUrl- Content server URL.
- Specific query parameter, e.g.
- Specific variable on window, e.g.
- Specific environment variables, e.g.
- If none of those are defined then we fallback to connecting to the base URL the app is served at.
e.g. If the app is served at
http://example.com:8080/appthen we will try to connect to