Micro Front-End React

Example Micro Front End With ReactJS

1. Setup Env

./main-app .env

PORT=4000
REACT_APP_MICRO_APP_NAME=Counter
REACT_APP_MICRO_APP_URL=http://localhost:4001

./sub-app-counter .env

PORT=4001
REACT_APP_NAME=Counter

2. Start App

./main-app .env

$ cd ./main-app
$ yarn
$ yarn start

./sub-app-counter .env

$ cd ./sub-app-counter
$ yarn
$ yarn start

Guide

1. Setup main and sub project

I use create-react-app to create project main and sub-app

2. With sub project

Change file ./sub-app-counter/src/index.js

// Config Name Sub APP
const APP_NAME = process.env.REACT_APP_NAME;
// Setup value render for window
const RENDER_SUB_APP = `render_${APP_NAME}`;
// Setup value unmount for window
const UNMOUNT_SUB_APP = `unmount_${APP_NAME}`;

// Main will use it when render in Main App
window[RENDER_SUB_APP] = (containerId, history) => {
  ReactDOM.createRoot(document.getElementById(containerId)).render(
    <App history={history} />
  );
};
// Main will use it when unmount in Main App
window[UNMOUNT_SUB_APP] = (containerId) => {
  ReactDOM.createRoot(
    document.getElementById(containerId)
  ).unmountComponentAtNode(document.getElementById(containerId));
};
// If you direction sub app then run into
if (!document.getElementById(`${APP_NAME}-container`)) {
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
}

2. With Main project

I will setup component to render Sub APP.

Path: ./main-app/src/microServices/microApp.js

Reference

1. kpiteng