Version: 8.x (Current)

Micro Launch Complex

micro-lc is the Mia-Platform solution for building flexible, multi-tenant front-end applications following the Micro Frontend architecture.

micro-lc consists of a core interface that loads, embeds, and orchestrates plugins (your individual frontend applications) at runtime, while providing configuration options and useful out-of-the-box features.

The project is open source, and it can be found on GitHub. Although the core components are written in Typescript and React, micro-lc is technology-agnostic, which means that it integrates seamlessly with your favorite toolkit, being it Angular, React, Vue, or anything else you like: even vanilla JavaScript!

Architecture#

Architecture

micro-lc is composed by three main blocks: fe-container, be-config and a varying number of plugins.

Front-end container#

The front-end core of micro-lc is the fe-container: a lightweight launcher written in React and Typescript which is responsible for rendering the plugins and for providing a set of core functionalities to the application.

These functionalities are for the most part configurable through a core configuration retrieved by the launcher at runtime. The choice of consuming this configuration at runtime makes the fe-container multi tenant: multiple tenants can use the same instance of micro-lc controlling the rendered plugins and the application theme through different configurations.

info

The fe-container is also available as Docker image.

It follows a list of the features offered and handled by the fe-container.

Base layout#

The launcher provides the core navigation layout composed by a top bar and a side menu. The top bar is responsible for the top-level functionalities, while the list of plugins and the routing capabilities can be placed on top bar or side menu, the latter is the default one.

While the top bar is always visible after the configuration load, the menu is designed as an overlay to leave as much space as possible to the plugins.

tip

The plugins can implement their own sub-navigation with an eventual dedicated side menu.
This will not graphically or logically interfere with micro-lc, which will integrate seamlessly the plugin routing in the main one.

User management#

micro-lc doesn't provide any authentication system, but it can be plugged in using the procedure described in the Authentication section.

Plugin management#

One of the most important responsibilities of the fe-container is the management of the plugins.
Each plugin is fetched and added to the side menu at boot, while it is rendered and embedded into the launcher only when requested.

note

If needed, a new route is registered at boot for accessing the plugin.

All the information regarding the plugins to render are retrieved from the Core configuration.

Branding#

Through the configuration, the fe-container handles the main branding of the application. Namely, it applies:

info

From the primary color is derived its 89% tint, a mixture of the primary color with white: both are available using the css variables, respectively named --microlc-primary-color and --microlc-primary-color-tint-89.

--microlc-primary-color-tint-89 is used to color, for example, the selected menu entry.

Dark mode#

In micro-lc is available the dark mode, where the colors are changed to darker tints. The dark mode is managed using the css variables previously introduced. It is possible to configure a secondary icon link for the dark theme inside the field url_dark_image of the logo object

info

A qiankun plugin can programmatically check the attribute dark-theme, on the html node, to know if dark mode is enabled.

Analytics#

The integration with Google Analytics is available and described in the Analytics section.

Backend configuration provider#

The configuration consumed by the fe-container is served by be-config, detailed in its dedicated section.

Plugins#

The plugins are the micro-fronted that actually composes the end application.
Each plugin is an independent, self-contained entity which can be written in any framework: plugins can have their own dedicated back-end, and they can be extended or configured at will at runtime.

micro-lc offers different ways to integrate plugins, as outlined in this section.
Plugins can communicate with each other, or navigate to each other manipulating the history of the application: see Plugins communication section for a more detailed explanation.