{"id":15130029,"url":"https://github.com/nikhil12894/myeditorapp-micro_frontend","last_synced_at":"2026-01-18T00:23:34.320Z","repository":{"id":248970627,"uuid":"830327978","full_name":"Nikhil12894/MyEditorApp-micro_frontend","owner":"Nikhil12894","description":"Host app using Editor app","archived":false,"fork":false,"pushed_at":"2025-01-12T17:44:57.000Z","size":5675,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T17:54:56.498Z","etag":null,"topics":["argocd","docker","github-actions","k8s","micro-frontend","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://micro-frontend-editor.learnwithnk.in/l","language":"TypeScript","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/Nikhil12894.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":"2024-07-18T04:19:50.000Z","updated_at":"2025-01-12T17:45:00.000Z","dependencies_parsed_at":"2024-07-18T06:57:35.814Z","dependency_job_id":"787a2037-f7da-43a6-8272-179d16dd784b","html_url":"https://github.com/Nikhil12894/MyEditorApp-micro_frontend","commit_stats":null,"previous_names":["nikhil12894/myeditorapp-micro_frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nikhil12894%2FMyEditorApp-micro_frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nikhil12894%2FMyEditorApp-micro_frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nikhil12894%2FMyEditorApp-micro_frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nikhil12894%2FMyEditorApp-micro_frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nikhil12894","download_url":"https://codeload.github.com/Nikhil12894/MyEditorApp-micro_frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393541,"owners_count":20931809,"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":["argocd","docker","github-actions","k8s","micro-frontend","react","tailwindcss"],"created_at":"2024-09-26T02:27:20.705Z","updated_at":"2026-01-18T00:23:34.279Z","avatar_url":"https://github.com/Nikhil12894.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### How to create Micro Frontend Using React Vite app and vite-plugin-federation\n![editor_demo](./editor_demo.gif)\n### Remote app\n### *Demo*: [Editor app](https://app-editor.learnwithnk.in/)\n1. Create a remote app from which will host the actual component.\n   \nInstall vite-plugin-federation plugin\n ```sh\n npm install -D @originjs/vite-plugin-federation\n ```\n\n2. Create your components. ie `DemoComponent`\n3. add this demo component in vite config to be exported algo with other config\n   \nIn `vite.config.ts`\n\n```ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport federation from \"@originjs/vite-plugin-federation\";\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    federation({\n      name: \"microFrontend\",\n      filename: \"remoteEntry.js\",\n      exposes: {\n        \"./DemoComponent\": \"./src/components/DemoComponent\",\n      },\n      shared: [\"react\", \"react-dom\"],\n    }),\n  ],\n  build: {\n    modulePreload: false,\n    target: \"esnext\",\n    minify: false,\n    cssCodeSplit: false,\n  },\n});\n```\n\n4. now run `npm run build`\n5. run `npm run preview`\n\nI'm importing as default the federation of the plugin, and we need to provide some properties:\n\n- name: the name of our object of module federation\n\n- filename: This is very important, because the build of the app will generate a single file that will be our manifest to expose the componets. (I recommended to use remoteEntry.js as default)\n\n- filename: This is very important, because the build of the app will generate a single file that will be our manifest to expose the componets.\n\n- exposes: The object where we will let's say what we're going to expose. In the example the atom of jotai and the PokemonList component.\n\n- shared: It's important because when we have other applications running our MF, we need to provide what is needed to render the MF. In this case, react and react-dom.\n  \nAnd even if the other application that consumes it is in react, the module federations plugin will define the import and if you already have it, it will not reimport.\n---\n### Host App\n\n### *Demo*: [Host-app](https://micro-frontend-editor.learnwithnk.in/)\n6. Now create Host app using vite\n7. run `npm install -D @originjs/vite-plugin-federation`\n8. add blow config in `vite.config.ts`\n\n```ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport federation from \"@originjs/vite-plugin-federation\";\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    federation({\n      name: \"\u003cAny name\u003e\",\n      remotes: {\n        microFrontend: \"http://localhost:4173/assets/remoteEntry.js\",\n      },\n      shared: [\"react\", \"react-dom\"],\n    }),\n  ],\n  build: {\n    modulePreload: false,\n    target: \"esnext\",\n    minify: false,\n    cssCodeSplit: false,\n  },\n});\n```\n\n9. Now use `microFrontend/DemoComponent` in your host app\n\n#### example --\n\n```ts\nimport DemoComponent from \"microFrontend/DemoComponent\";\n\nimport \"./App.css\";\n\nfunction App() {\n\n  return (\n    \u003c\u003e\n      \u003ch3 style={{ color: \"#1e3a8a\", fontSize: \"20px\" }}\u003e\n        Created using Vite + vite-plugin-federation\n      \u003c/h3\u003e\n      \u003cDemoComponent /\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n10. run `npm run dev`\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikhil12894%2Fmyeditorapp-micro_frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikhil12894%2Fmyeditorapp-micro_frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikhil12894%2Fmyeditorapp-micro_frontend/lists"}