C3 AI Documentation Home

Install and use new libraries

UI Stack comes out of the box with hundreds of libraries to accelerate the development of both back-end and front-end logic, including to render UI components.

But you're not limited to these libraries. You can install any library available in the NPM ecosystem. There are two steps to install a new library:

  1. Extend the js-webpack_c3 with the new library you want to install. This declares the dependency on the library.
  2. Resolve the runtime. This makes sure that information about transitive dependencies is captured, ensuring your builds are as repeatable as possible.

Learn which libraries are available

The UI Stack uses a single runtime named js-webpack_c3. This runtime contains all the libraries used by UI Stack and available out of the box to application developers.

You can also extend the runtime with any other libraries you need.

Before installing new libraries, it's best to search if the library you need is already available. In console run:

JavaScript
ImplLanguage.Runtime.forName("js-webpack_c3").libraries

This shows all libraries available for UI development, as well as the version of the library available.

Bring a new library

To add a new library for UI development, extend the js-webpack_c3 runtime. In your application package, create a new file under {package}/metadata/ImplLanguage.Runtime/js-webpack_c3.json with:

JSON
{
  "name": "js-webpack_c3",
  "libraries": [
    "npm @material-ui/core@3.9.4"
  ]
}

The example above installs the Material UI component library, but you can install any library you need from the NPM ecosystem.

This step is equivalent to updating your package.json file in the NPM ecosystem.

Resolve the runtime

Once you declare a dependency on the new library, you need to resolve the runtime to ensure all transitive dependencies are captured, thus ensuring your builds will always have the same libraries in the same versions.

In console run:

JavaScript
Js.upsertRuntime(runtime, "client");

Once you run this, your {package}/metadata/Js.Runtime directory is updated with new runtime definitions that include all the transitive dependencies. The equivalent in the NPM ecosystem is the package-lock.json.

Make sure to version control the files in {package}/metadata/ImplLanguage.Runtime, and {package}/metadata/Js.Runtime so it's easy to manage libraries and keep builds repeatable.

Use the library

Once the library has been installed, you can use it as part of your application logic.

See also

Was this page helpful?