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.
micro-lc is composed by three main blocks: fe-container, be-config and a varying number
The front-end core of
micro-lc is the fe-container: a lightweight launcher written in
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.
The fe-container is also available as Docker image.
It follows a list of the features offered and handled by the fe-container.
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.
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.
micro-lc doesn't provide any authentication system, but it can be plugged in using the procedure described in the Authentication section.
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.
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.
Through the configuration, the fe-container handles the main branding of the application. Namely, it applies:
- the specified menu location of the menu (topBar/sideBar)
- the specified logo in the top bar;
- the specified favicon and document title;
- the specified navigation url to the logo
- the specified primary color to the different layout components.
From the primary color is derived its 89% tint, a mixture of the primary color with white: both are available using
--microlc-primary-color-tint-89 is used to color, for example, the selected menu entry.
micro-lc is available the dark mode, where the colors are changed to darker tints.
The dark mode is managed using the
It is possible to configure a secondary icon link for the dark theme inside the field
url_dark_image of the logo object
A qiankun plugin can programmatically check the attribute
html node, to know if dark mode is enabled.
The configuration consumed by the fe-container is served by be-config, detailed in its dedicated section.
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.