Usage

Learn how to use the UI Protocol to enhance communication and data exchange between micro and main frontend applications.

Prerequisites

Before you begin working with the UI Protocol project, ensure you have the following prerequisites met.

Node.js: Make sure you have a at least lts/hydrogen version of Node.js installed on your system.
React: 18.2.0 or higher version of React is required to use the UI Protocol libraries.

Application Type

Before integrating the UI Protocol libraries into your project, it’s essential to determine the type of application you are building. UI Protocol supports two types of applications: main applications and micro frontends. For main(host) applications, you need to integrate the @akinon/app-shell library, while for micro applications, you need to integrate the @akinon/app-client library.

⚠️

It’s crucial to understand that the @akinon/app-shell and @akinon/app-client libraries serve different purposes and must not be installed and integrated into the same project simultaneously. The @akinon/app-shell library is designed for managing the main application shell and communication with micro frontends, while the @akinon/app-client library is intended for micro frontends to interact with the main application shell. Attempting to integrate both libraries into the same project may lead to conflicts and unexpected behavior.

AppShell

To install the @akinon/app-shell library, run the following command:


pnpm add @akinon/app-shell

AppClient

For AppClient library we recommend creating your project with our CLI tool. The CLI will automatically install the required dependencies and set up the project structure for you. However, you can also install the @akinon/app-client library manually by running the following command:


pnpm add @akinon/app-client