estela Micro-Frontends Guide

The main goal of micro frontends in estela-web is to be able to use external components. This allows the use of custom components.

estela allows the use of Micro-Frontends only in the user dropdown. This is achieved with the use of Module Federation.

Requirements

• The micro-frontends must use Module Federation
• The micro-frontends must have and expose their routes with the name of ComponentRoutes

    // example
    export default class ComponentRoutes extends Component<unknown, unknown> {
        render(): JSX.Element {
            return (
                <>
                    <Route path="/Page" component={Page} exact />
                </>
            );
        }
    }
  

• The micro-frontend must have a MenuProps array.

    // example
    import type { MenuProps } from "antd";
    import { Layout } from "antd";
  
    const { Content } = Layout;
  
    const userDropdownSidenavItems: MenuProps["items"] = [
        {
            key: "/3",
            label: (
                <Content>
                    <Link to={"/page"} >
                        page
                    </Link>
                </Content>
            ),
            style: { backgroundColor: "white" },
        },
    ];
  
    export default userDropdownSidenavItems;
  

estela configuration

• To use Micro-frontend configuration, you need to run the command

    $ yarn mf:start --env remoteURL=<MICRO-FRONTEND-URL>
  

  Where <MICRO-FRONTEND-URL> is the location of the micro-frontend. Example:

    $ yarn mf:start --env remoteURL=http://localhost:3006/
  

• For production, you need to run the command

    $ yarn mf:build --env remoteURL=<MICRO-FRONTEND-URL>
  

---