UI Components target the web platform and are developed using Node.js tooling. In order to develop UI Components, follow the next sections.

Core requirements

In order to develop UI Components, Node.js and Git are required:

• You can install Node.js by using the instruction on the Node.js website. It is recommended to use Node.js 18 or newer.
• You can install Git by using the instructions on the Git website.

Once you have installed them, open your terminal of choice and type in the following commands to make sure that the installation was successful:

node --version
# v18.3.0

git --version
# git version 2.37.0

Recommended software

It is recommended to use a code editor or IDE that understands HTML, CSS and JavaScript, for example Microsoft Visual Studio Code or WebStorm. The entirety of the tutorials on the IXON Developer Website are tested via VS Code.

❗️

Important for Windows Users:

Make sure to use the lines of command mentioned throughout the tutorials in a WSL Terminal on the editor. This can avoid unnecessary blocking issues.

Installing the CDK

The Component Development Kit (CDK) is a tool that helps you develop and deploy UI Components. It lets you generate starter components, simulate your component for development purposes and lets you deploy and publish your component.

❗️

Note:

Do NOT start working on your workspace by cloning the workspace from Github!
It is crucial to follow the upcoming steps instead to avoid Git-related issues.

The CDK is preconfigured in the Component Workspace. Run the following command in a directory to initialize a new UI Component application.

npx degit ixoncloud/component-workspace my-project
cd my-project
npm install

The /components folder contains the code for your UI Components, while the cdk.config.json file contains the configuration for the workspace and instructions on how UI Components are built/should be deployed.

You are now ready to create your first UI Component!