{"id":21891165,"url":"https://github.com/thangtranse/micro-front-end-react","last_synced_at":"2025-03-22T03:12:38.017Z","repository":{"id":105123423,"uuid":"542880706","full_name":"thangtranse/micro-front-end-react","owner":"thangtranse","description":"Example Micro Front-End With ReactJS","archived":false,"fork":false,"pushed_at":"2022-09-30T04:05:23.000Z","size":327,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T22:34:24.733Z","etag":null,"topics":["micro-frontend","microfrontend","react","react-micro-apps","react-microfrontend","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thangtranse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-29T02:26:34.000Z","updated_at":"2023-02-20T03:16:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"a7b024e1-c775-4325-a237-fb1f720dfdc4","html_url":"https://github.com/thangtranse/micro-front-end-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangtranse%2Fmicro-front-end-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangtranse%2Fmicro-front-end-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangtranse%2Fmicro-front-end-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangtranse%2Fmicro-front-end-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thangtranse","download_url":"https://codeload.github.com/thangtranse/micro-front-end-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["micro-frontend","microfrontend","react","react-micro-apps","react-microfrontend","reactjs"],"created_at":"2024-11-28T12:21:03.990Z","updated_at":"2025-03-22T03:12:38.011Z","avatar_url":"https://github.com/thangtranse.png","language":"JavaScript","readme":"# Micro Front-End React\nExample Micro Front End With ReactJS\n\n## 1. Setup Env\n\n./main-app  `.env`\n```js\nPORT=4000\nREACT_APP_MICRO_APP_NAME=Counter\nREACT_APP_MICRO_APP_URL=http://localhost:4001\n```\n\n./sub-app-counter `.env`\n```js\nPORT=4001\nREACT_APP_NAME=Counter\n```\n\n## 2. Start App\n\n./main-app  `.env`\n```js\n$ cd ./main-app\n$ yarn\n$ yarn start\n```\n\n./sub-app-counter `.env`\n```js\n$ cd ./sub-app-counter\n$ yarn\n$ yarn start\n```\n\n# Guide\n\n## 1. Setup main and sub project \nI use `create-react-app` to create project `main` and `sub-app`\n## 2. With sub project\n\nChange file `./sub-app-counter/src/index.js`\n```js\n// Config Name Sub APP\nconst APP_NAME = process.env.REACT_APP_NAME;\n// Setup value render for window\nconst RENDER_SUB_APP = `render_${APP_NAME}`;\n// Setup value unmount for window\nconst UNMOUNT_SUB_APP = `unmount_${APP_NAME}`;\n\n// Main will use it when render in Main App\nwindow[RENDER_SUB_APP] = (containerId, history) =\u003e {\n  ReactDOM.createRoot(document.getElementById(containerId)).render(\n    \u003cApp history={history} /\u003e\n  );\n};\n// Main will use it when unmount in Main App\nwindow[UNMOUNT_SUB_APP] = (containerId) =\u003e {\n  ReactDOM.createRoot(\n    document.getElementById(containerId)\n  ).unmountComponentAtNode(document.getElementById(containerId));\n};\n// If you direction sub app then run into\nif (!document.getElementById(`${APP_NAME}-container`)) {\n  ReactDOM.createRoot(document.getElementById(\"root\")).render(\u003cApp /\u003e);\n}\n```\n## 2. With Main project\nI will setup component to render Sub APP.\n\nPath: `./main-app/src/microServices/microApp.js`\n\n# Reference \n\n1. [kpiteng](https://dev.to/kpiteng/microfrontends-with-react-47jb?signin=true)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangtranse%2Fmicro-front-end-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthangtranse%2Fmicro-front-end-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangtranse%2Fmicro-front-end-react/lists"}