2025-01-07 - Micro Frontends Tree Structure

Page output config

 /src
   /pageOutputConfig
     -elementConfigOutput.jsx
   /lib
     -generateElement.jsx
   /reduxSlices
     -menuOutputSlice.js
   -izaraFrontends-menu-config-output.js
   -root.component.js
   -InitMenuOutput.jsx
   -menuOutput.jsx

Page output

 /src
   /pageOutput
     -elementOutput.jsx
   /lib
     -generateElement.jsx
   /reduxSlices
     -menuOutputSlice.js
   -izaraFrontends-menu-output.js
   -root.component.js
   -InitMenuOutput.jsx
   -menuOutput.jsx

Directory Explain

src

All directories and files are stored here.

pageOutput/pageOutputConfig

Keeps all files that store all components connect from the pageOutput/pageOutputConfig npm library.

pageOutput

• use with output microfronent
• must have elementOutput.jsx file.

pageOutputConfig

• use with config microfronent
• must have elementConfigOutput.jsx file.

lib

Keeps all files that store functions declared more than once in microfrontends.

reduxSlices

Keeps all files that store reducer slice. Should separate each slice to each file eg. menuOutputSlice.js, menuOutputUtilsSlice.js

file Explain

elementConfigOutput.jsx

Store components that connect from pageOutputConfig npm library.

elementOutput.jsx

Store components that connect from pageOutput npm library.

izaraFrontends-menu-config-output.js

fist file register from root-config

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Root from "./root.component";

const lifecycles = singleSpaReact({
  renderType: "createRoot",
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;