How to: Integrate your existing application with the Console UI library

The Console UI library acts as the glue that binds the application and the end-user together. After you register your App in the OS1 developer portal and integrate it with the Console UI library, it is then ready to be made available to end-users on their respective landing pages.

For more information about Console UI, see Console UI Overview.

This how-to outlines the steps to integrate your App with Console UI.

  1. Install the Console UI library.

    From the command line, you can use either npm or yarn to install the library. Alternatively, you can add consoleui-library to the list of dependencies in your package.json file.
npm install @os1-platform/consoleui
yarn add consoleui-library
  1. Set up your webpack configuration.

    The integration uses webpack to connect your App to the Console UI. Depending on the folder structure, you will need to make the modifications below to all of your webpack configuration files(ex. webpack.config.js, webpack.prod.js, and similarly for other environments).
    Import the library consoleui-library and import the HEADER_URL variable. Add this to the list of remotes as outlined below.
const HEADER_URL = require('consoleui-library').HEADER_URL;
plugins: [
    remotes: {
      header: HEADER_URL,
    },
]

🚧

Multiple webpack configurations

There are cases where your project might contain multiple webpack configuration files (such as wepback.prod.js etc.). Be sure to apply the above changes to all the config files.

You can now import the header anywhere in your application.

📘

Note

If you are using Craco config(add link), you might have to make changes to your modulefederation.config.js file instead of the webpack.config.js

  1. Initialize the Header within your application.

    Next, add the header to your App. To determine whether the integration is successful :
    • Unauthorized users opening your App are redirected to the login page.
    • Authorized users who are able to access the application see a header component on the top of the application.
      To add the header to your App, import the initialize function and call it as follows:
import { initialize } from "header/initialize";

initialize();

Did this page help you?