https://github.com/thangtranse/micro-front-end-react
Example Micro Front-End With ReactJS
https://github.com/thangtranse/micro-front-end-react
micro-frontend microfrontend react react-micro-apps react-microfrontend reactjs
Last synced: 11 months ago
JSON representation
Example Micro Front-End With ReactJS
- Host: GitHub
- URL: https://github.com/thangtranse/micro-front-end-react
- Owner: thangtranse
- Created: 2022-09-29T02:26:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-30T04:05:23.000Z (over 3 years ago)
- Last Synced: 2025-02-02T22:34:24.733Z (about 1 year ago)
- Topics: micro-frontend, microfrontend, react, react-micro-apps, react-microfrontend, reactjs
- Language: JavaScript
- Homepage:
- Size: 319 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Micro Front-End React
Example Micro Front End With ReactJS
## 1. Setup Env
./main-app `.env`
```js
PORT=4000
REACT_APP_MICRO_APP_NAME=Counter
REACT_APP_MICRO_APP_URL=http://localhost:4001
```
./sub-app-counter `.env`
```js
PORT=4001
REACT_APP_NAME=Counter
```
## 2. Start App
./main-app `.env`
```js
$ cd ./main-app
$ yarn
$ yarn start
```
./sub-app-counter `.env`
```js
$ 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`
```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(
);
};
// 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();
}
```
## 2. With Main project
I will setup component to render Sub APP.
Path: `./main-app/src/microServices/microApp.js`
# Reference
1. [kpiteng](https://dev.to/kpiteng/microfrontends-with-react-47jb?signin=true)