Getting Started

Setting Up the Accelerator SDK

Step 1. The ActiveUI App

The first step is to make sure that your ActiveUI SDK module federated app is working properly:

1. Download the starter app from the ActiveUI Documentation page.
2. Run the app and confirm that it works.
3. Select the Accelerator SDK features that you want to add to your project.

You can now begin configuring the ActiveUI app to work with the Accelerator SDK features.

Step 2. Installing the Accelerator SDK

We upload all of the Accelerator SDK versions to Artifactory.

1. Add the Accelerator SDK as a dependency to your project inside package.json:

"dependencies": {
  "@activeviam/accelerator-sdk": "5.x.x",
}

2. Import the Accelerator SDK into your project:

Import {xyz} from "@activeviam/accelerator-sdk"

Step 3. The Settings Object

Refer to the Accelerator Settings page to learn about the Accelerator SDK settings object and how to set it up.

Step 4. Importing the Accelerator SDK plugins

Next we need to import the plugins from the Accelerator SDK.

If you take a look at the ActiveUI module federated app, you will see the configuration.pluginRegistry extension point. This accepts all the plugins that we want to register or activate within the ActiveUI app.

By default, all the Accelerator SDK plugins are found inside this defaultPlugins object that’s exported from the Accelerator SDK. It contains all the up-to-date ActiveUI plugins, along with most, but not all, of the features of the Accelerator SDK. The features omitted are not plugins and so are implemented using other ActiveUI extension points.

import { defaultPlugins } from "@activeviam/accelerator-sdk";

After you export these from the Accelerator SDK, you can set the configuration.pluginRegistry array to hold the defaultPlugins object.

const extension: ExtensionModule = {
  activate: async configuration => {
    ...
    configuration.pluginRegistry = defaultPlugins;
    ...
  }
};

Step 5. Accelerator SDK Settings HOC

For the plugins to work properly, we need to configure them with a few necessary pieces of code.

The Accelerator SDK exports a React Higher Order Component (HOC) that gets wrapped around the entire application, which allows the plugins and features to read from the settings object that we created previously.

Import the withClientSettings function and pass your Accelerator Settings Object to it to retrieve the HOC. Then pass the HOC into the ActiveUI higherOrderComponents extension point:

import { withClientSettings } from "@activeviam/accelerator-sdk";
import { projectSettings } from "./projectSettings.ts";

const accSdkHoc = withClientSettings(projectSettings);

const extension: ExtensionModule = {
 activate: async configuration => {
   ...
   configuration.higherOrderComponents = [withSandboxClients, accSdkHoc];
   ...
 }
};

Tools

• Yarn: Version 1.22.4 or greater

• Node: Version 16.10.x or greater