Sandbox Project

The ActiveUI sandbox

This project was bootstrapped with Create React App, please take a look at their README (make sure it matches your version of react-scripts).

Purpose of the project #

The project serves two purposes:

  1. Provide a project example already set-up, in which ActiveUI is already imported and executed. In that example (App.js), developers can start writing their own code directly.
  2. Provide the documentation through static pages and interactive pages (called snippets or showcase). These are accessible from the homepage once the sandbox project is run.

ActiveUI dependency #

There are multiple ways to add ActiveUI as a dependency of this project. Please refer to the ActiveUI documentation for more details.

By default, the package.json of this project points to an ActiveUI tgz file located in the ActiveUI sandbox root folder.

Installing the project #

The project can be installed using any node package manager like npm or Yarn, by running the appropriate command (npm install or yarn install). By default, during the postinstall phase, the “locales” and “tutorial” assets are copied inside the project. Once you don’t need them anymore, don’t forget to update the postinstall script to only copy the needed files.

Getting started #

The following commands are available:

  • npm start: Runs the app in the development mode.
  • npm test: Launches the test runner in the interactive watch mode.
  • npm run build: Builds the app for production to the build folder.

Adding Flow #

ActiveUI uses Flow to statically type its JavaScript code and to generate its API reference. We also extract these types to generate a libdef that provides autocompletion and static checking for your own project when manipulating the ActiveUI API. To benefit from these features, you have to enable Flow and configure your editor to talk with the Flow server (see the “IDE Configuration” section in the ActiveUI documentation).

Environment-Specific Configuration #

Once the application is bundled, you may want to change some of your default parameters like the log level or the main Content Server URL depending on the environment on which ActiveUI is deployed.

In order to do so without having to re-bundle the application, you can use the env.js file in your project root folder for this purpose. The JavaScript object exported in this file will be accessible globally through window.env without being bundled.

See src/activeui.js for an example of how it can be used.


For projects targeting old browsers not implementing ES2015 Symbol, such as Internet Explorer 11 and below, a Symbol polyfill must be imported before any other import – specifically before React, React-DOM and ActiveUI.

The Symbol polyfill we recommend is babel-polyfill. You can set it up by running npm install --save babel-polyfill and then adding the line import 'babel-polyfill'; to the very top of your src/index.js.

For more information, see this React GitHub issue.