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

Note

• **"menu" is just for example object name can change it follow by using object

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

The first file registered from root-config and all components and functions that need to be called in other components must be exported from this file.

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;
export { InitMenuOutput } from "./initMenuOutput.jsx" export function and components here

root.component.js

store only root component and root component must call InitOUtput/InitConfigOutput component

import { InitMenuOutput } from './initMenuOutput.jsx';

export default function Root(props) {
  return (
    <InitMenuOutput />
  )
}

InitMenuOutput.jsx

import { Provider } from 'react-redux';
import { store, injectReducer } from '@izaraFrontends/store';
import { MenuOutput } from './menuOutput.js';
import { menuOutputReducer } from './reduxSlices/menuOutputSlice.js';
import { MENU_OUTPUT_SLICE_NAME } from './reduxStoreConsts.js';
import { UserDetail } from "@izaraFrontends/user-detail";

export const InitMenuOutput = () => {
  const objId = "menuConfigBackend"
  injectReducer(MENU_OUTPUT_SLICE_NAME, menuOutputReducer.reducer, {
    getBackend: {
      type: "query",
      tagType: "config",
      timeCache: 60,
    },
    sendBackend: {
      type: "mutation",
      tagType: "configX",
    },
    getSchema: {
      type: "S3",
    },
  });
  console.log("menuOutputReducer", menuOutputReducer.actions)
  return (
    <Provider store={store}>
      <UserDetail>
        <MenuOutput />
      </UserDetail>
    </Provider>
  )
}