Component SDK → Getting Started

Developing a custom chart using the Component SDK requires React knowledge, as you will develop HTML, CSS, JSON, Javascript, Node.js, NPM, React, and Typescript.

React is a declarative, component-based, open-source front-end JavaScript library for building user interfaces or UI components. For more information, refer to the React documentation.

Component SDK prerequisites

To get started with your Component SDK, you must first complete the following steps:

  • Download a code editor to use in the development phase.
    Recommendation

    If you do not have a preferred code editor, we recommend using Visual Studio Code to benefit from the auto-complete feature while configuring the JSON files.

  • Install HomeBrew.
    Note

    HomeBrew is a package manager and it is highly recommended for future installations.

  • Install Node.js : % brew install node
  • Install Node Package Manager (NPM): % brew install npm

Download and start the Component SDK

After completing all of the prerequisites, download the component SDK to your local machine where all of the development process will take place, and then start the Component SDK.

In the terminal, run the following commands in order:

  • Download the Component SDK:

    % npm install -g @incorta-org/create-incorta-component

  • Change the directory to your development environment, for example: Documents/chart1.

  • Start the SDK:

    create-incorta-component

The create-incorta-component command has more than one possible attribute value:

AttributeDescription
new [directory]Creates the scaffolding for a new Incorta Component, where [directory] is the folder name in which you want to develop your component.
For example, create-incorta-component new chart1.
startStart the development server to connect with your Incorta cluster to begin implementing your component.
For example, create-incorta-component start.
packageBuild the component you developed and generate the .inc bundle file.
For example, create-incorta-component package.
help [command]Display the help description for a certain command, where [command] is the command that you need help information for.
For example, create-incorta-component help package.
  • After starting the Component SDK, create a new project using the following command:

    create-incorta-component new <directory_name>