The Hub Shell

To update the navigation entries, refer to Configuring the Sidebar.

When developers refer to the "Hub shell", they're referring to the code that "wraps" hub applications and provides authentication, authorization, and navigation. This page will provide a little context for how the hub shell works and how it got to where it is today.

Hub shell

The shell#

As of today, the Hub Shell is developed as a standalone Hub v2 application that displayed other applications as websites inside an iframe. When a user navigates to https://hub.iqmetrix.net, the Hub shell redirects to the login page and once back to the shell, it uses the authentication token to check if the user permissions and to display the right Hub's header and sidebar elements. When a user navigates to an application, the Hub shell verifies the user is authorized to access that application, and then displays an iframe containing the application using the url #appName.

The shell is no longer built into each application. It is updated and released independently.

hub-dev-server utility#

The hub-dev-server utility aim to mock the shell behaivour when developing an application locally. You will be able to run the local app inside of the shell through an iframe. It is compatible with hub v1 and react applications.

v1#

Every v1 app starts life as a clone of the HubBoilerplate repository. This boilerplate contains a basic application template and imports HubCommon, which contains necessary templating logic and libraries; and hub.common.tooling, which contains all the v1 cli-tooling and build-scripts. The imported build-scripts are used to build the application - including the hub-dev-server utility to run the app inside of the shell. This means that each application will run with a copy of the shell that was deployed on INT enviroment when the last version of the utility was released.

The shell was removed from HubCommon in version 5.4.0 and hub-dev-server was added to hub.common.tooling version 2.3.0

v2#

V2 applications live in a monorepo, making it easy to import the needed plugins or adapters to communicate with the shell, but developers found the ecosystem to be overly restrictive and complicated, leading to it's deprecation.

React#

React development aimed to reuse the Hub v2 shell, while giving teams more flexibility and control over their applications. The react application will open locally using the the hub-dev-server utility. To help with Hub development, frontend-packages/packages/functions provides functions to communicate with the shell.

Teams using this approach are now free to develop their applications within their own repositories, and leverage their own conventions and best-practices. The creating a new app guide is a great place to get started with developing React apps.

Last updated on by Paulo Andrade