Important

This feature is currently in Early Availability (EA) status. For more information, see our product lifecycle phases.

Extensions Architecture

Overview

The extensions architecture is based on a set of principles for building extensions that work well with the marketplace.

Principles

1. Extensions are independent
2. Extensions use the same tooling as the platform
3. Extensions are straightforward to build and test

Core Technologies

1. React
2. Styled Components
3. Webpack - Module Federation

UI applications in the marketplace use React and Styled Components. Styled Components helps in a micro front-end setup by avoiding style leakage between applications. Webpack Module Federation loads and unloads UI applications without full page refreshes.

How it works

Extensions use a micro front-end architecture: each extension is a self-contained application that runs inside a container application. The container loads extensions at runtime.

Container application

The container manages shared logic across all extensions. It uses React but can load apps built with other technologies (for example, Angular). The container:

• Manages navigation (header, footer, secondary navigation).
• Handles routing to each extension.

In the diagram below, everything except the blue section is part of the container. The blue section is an extension loaded separately.

Webpack Module Federation and extension loading

The build distinguishes local modules (included in the current build) from remote modules (loaded from the container at runtime). Extensions are remote modules loaded by the container.

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'Container',
      remotes: {
        MyApps: 'MyApps@http://localhost:3001/remoteEntry.js',
      },
    }), 

Routing to extensions is handled by a router.

const MyApps = lazy(() => import('MyApps'));

const Routes = () => {
  return (
      <Router>
        <Header />
        <main>
          <SecondaryNav />
          <Suspense fallback={<div>Loading MicroUI...</div>}>
            <Switch>
              <Route path="/mf-a">
                <MyApps />
              </Route>
            </Switch>
          </Suspense>
        </main>
        <Footer />
      </Router>
  );
};

Communication between the container and extensions

Extensions sometimes need to communicate with the container. Common cases include:

• Navigating to another page
• Showing global notifications
• Showing the error page

You can use DOM custom events for this. They work with any JavaScript framework and do not require extra libraries. The container and extensions communicate via these events.

Example:

window.dispatchEvent(new CustomEvent("router-update", { path: "/myapps"}));

window.dispatchEvent(new CustomEvent("show-error-page");

window.dispatchEvent(new CustomEvent("add-notification", { type: "info", message: "Profile Updated"}));