{"id":20103601,"url":"https://github.com/nevinhajs/react-micro","last_synced_at":"2025-05-06T08:31:21.481Z","repository":{"id":62386711,"uuid":"560191510","full_name":"NevinhaJS/react-micro","owner":"NevinhaJS","description":"Speed up the your micro-frontend development. Configure less and delivery more.","archived":false,"fork":false,"pushed_at":"2022-11-06T11:09:52.000Z","size":514,"stargazers_count":9,"open_issues_count":2,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-27T16:06:08.113Z","etag":null,"topics":["micro-frontend","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NevinhaJS.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-31T23:45:27.000Z","updated_at":"2023-05-09T18:23:46.000Z","dependencies_parsed_at":"2023-01-23T17:16:33.540Z","dependency_job_id":null,"html_url":"https://github.com/NevinhaJS/react-micro","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NevinhaJS%2Freact-micro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NevinhaJS%2Freact-micro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NevinhaJS%2Freact-micro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NevinhaJS%2Freact-micro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NevinhaJS","download_url":"https://codeload.github.com/NevinhaJS/react-micro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252648594,"owners_count":21782411,"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","react"],"created_at":"2024-11-13T17:37:20.393Z","updated_at":"2025-05-06T08:31:20.779Z","avatar_url":"https://github.com/NevinhaJS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Micro\n\nSpeed up the your micro-frontend development. Configure less and delivery more. You don't need to waste more time trying to change your application to support multiple micro-frontends or use iframe becase of old bundler version.\n\n## Why\n\n**Reason One**\nWebpack federation module and other bundlers requires newest version of their library (webpack 5+) and makes your application bounded to their architecture, which makes harder the migration to other module bundles.\n\n**Reason Two**\nIf your project uses old bundler version like \u003c= webpack4, you might not be able to use a decent configuration to run a micro-frontend in the client side without spending some time changing the architecture of your **container** and **host**.\n\n**Reason Three**\nIf you don't want to spend too much time chaing the architecture of your container and host, you might decide to go with `iframe` which is not good for the following reasons:\n\n- Cookies does not work well.\n- Browser history, routing and deep linking are complicated to integrate.\n- It makes responsive design a bit tuff for some cases.\n- You will not be able to provide any input/function as parameter in the initial render of the micro-frontend.\n- Not elegant for developers (developer friendly).\n\n## How to use?\n\n**Configuring your container**\nIt's pretty straight forward, you just need to call the `Micro` component in your container, which is in most of the case the root application:\n\n```js\nimport { Micro } from \"react-micro-js\";\n\n\u003cMicro\n    name=\"MicroCar\"\n    manifestSRC=\"manifest.json\"\n    host=\"http://localhost:4000\"\n    deeps={[...]}\n/\u003e\n```\n\nwhere:\n- _**name**_ is the name of your micro frontend. Keep this name in mind, because this should be the same that you will use in the `connect` function later.\n- _**manifestSRC**_ the destination to your manifest file. In this case the manifest file is found at `http://localhost:4000/manifest.json`\n- _**host**_ the endpoint where your micro-frontend is deployed.\n- _**deeps**_ the dependency array which you want to inject in your micro-frontend when it is going to be mounted. Usually used for _browser history_, _event emitters_ and _shared capabilities_.\n\nThe **manifest** is json file which has a `files` entry on it. If you use create-react-app it will be something like:\n\n\u003cimg src=\"./docs/manifest-example.png\"\u003e\n\n**Configuring your host**\nThere's one last step, which is to configure your micro-frontend, some times called as _host_.\n\nIn the entry point of your application, most of the time `index.js`, you need to move your ReactDOM render logic to be inside a function, like this example bellow:\n\n```js\nconst mountFn = (connect) =\u003e (containerId, deeps) =\u003e {\n  const root = ReactDOM.createRoot(document.getElementById(containerId));\n\n  root.render(\u003cApp /\u003e);\n\n  connect(root);\n};\n```\n\nPlease notice we're calling a `connect` function which will come as parameter from the `connector` later. Also notice this 2 parameters provided in the curried function: `containerId` and `deeps`, where:\n\n- _**containerId**_ is the id of your micro-frontend container, which will be `[YOUR_MICRO_FRONTEND_NAME]-container`\n- _**deeps**_ dependency array provided from the parent container.\n\nThen, you just need to provide your `mountFn` to react-micro-js `connector` and that is it:\n\n```js\nimport { connector } from \"react-micro-js\";\n\nconst host = connector(mountFn, {\n  devRoot: \"root\",\n  name: \"MicroCar\",\n});\n```\n\nWhere:\n\n- _**name**_ is the micro-frontend name. This property should be the same name that you have provided in the `\u003cMicro /\u003e` component which you used inside your container. \n- _**devRoot**_ is the id of the html element that the micro-frontend should be attached in case it is running isolated, without the container. Eg: suppose your application is running at `localhost:3000` but your micro-frontend is running at `localhost:4000` and you are accessing `localhost:4000` directly, the connector function will know that there isn't any container to attach your micro-frontend, so it will try to find the html tag with the `id === devRoot` property.\n\n### Found an issue, need help or want a feature request?\nWe're more than happy to fix bugs, create features or help you anything, you just need to create an issue [here](https://github.com/NevinhaJS/react-micro-js/issues/new).\n\n### What is next?\n\n- Create unit tests ASAP.\n- Create dispatch function, to make easer cross communication between hosts and containers.\n- Create CONTRIBUTTING.md","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnevinhajs%2Freact-micro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnevinhajs%2Freact-micro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnevinhajs%2Freact-micro/lists"}