Technical details

How to add micro-frontend to any web application

Can be done adding just 2 lines of code in the head section of your HTML:

<link rel="stylesheet" href="https://cdn-microfrontend-poc.yonder-makers.com/build/web-components.css" />
<script type="module" src="https://cdn-microfrontend-poc.yonder-makers.com/build/web-components.esm.js"></script>

Doing this, the native HTML components collection will be extended with micro-frontend components from the package.

Global Counter components

Every time you click the + button, the component is calling the API endpoint that stores a global counter for all the users.

Default Usage:

<global-counter-component></global-counter-component>

Readonly usage:

<global-counter-component readonly="true" ></global-counter-component>

Reset Global Counter component:

<reset-global-counter-component></reset-global-counter-component>

Name Configurator and Welcome Text components

The name is persisted on the backend and available across all the applications for the current user session (using cookies in this case). The Name Configurator component is used to configure the name of the user. The Welcome Text component is used to display a welcome message with the configured name.

Name Configurator default usage:

<name-configurator-component></name-configurator-component>

Welcome Text default usage:

<welcome-text-component></welcome-text-component>

Configure the prefix-message for the Welcome Text

<welcome-text-component prefix-message="Another message prefix" ></welcome-text-component>

Header component

The menu items and links are hardcoded in this proof of concept. But it can be configured dynamically based on user.

Default usage:

<header-component></header-component>

Add submenu-extras to the header using slot mechanism

<header-component>
  <link-component slot="submenu-extras" 
    text="This is a custom link" 
    href="https://tss-yonder.com">
  </link-component>
</header-component>

Contact us

For more details about this proof of concept, check at contact listed here.