{"id":29035844,"url":"https://github.com/anandhuremanan/reactsveltemicrofrontend","last_synced_at":"2026-05-08T00:39:41.775Z","repository":{"id":245075071,"uuid":"817175376","full_name":"anandhuremanan/ReactSvelteMicroFrontEnd","owner":"anandhuremanan","description":"This repository provides a minimal setup for a micro frontend architecture using React and Svelte, bundled with Webpack. The aim is to demonstrate how to integrate two different frameworks into a single application, leveraging Webpack's module federation to ensure a smooth and efficient build process.","archived":false,"fork":false,"pushed_at":"2024-06-20T03:51:24.000Z","size":51,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-10T06:05:36.028Z","etag":null,"topics":["module-federation","react","svelte","webpack"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/anandhuremanan.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-06-19T07:11:30.000Z","updated_at":"2024-06-20T03:51:27.000Z","dependencies_parsed_at":"2024-06-19T16:04:12.785Z","dependency_job_id":"d2c9f260-e394-41c1-b03c-e23f080f26bb","html_url":"https://github.com/anandhuremanan/ReactSvelteMicroFrontEnd","commit_stats":null,"previous_names":["ananduremanan/reactsveltemicrofrontend","anandhuremanan/reactsveltemicrofrontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anandhuremanan/ReactSvelteMicroFrontEnd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anandhuremanan%2FReactSvelteMicroFrontEnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anandhuremanan%2FReactSvelteMicroFrontEnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anandhuremanan%2FReactSvelteMicroFrontEnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anandhuremanan%2FReactSvelteMicroFrontEnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anandhuremanan","download_url":"https://codeload.github.com/anandhuremanan/ReactSvelteMicroFrontEnd/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anandhuremanan%2FReactSvelteMicroFrontEnd/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262068818,"owners_count":23253875,"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":["module-federation","react","svelte","webpack"],"created_at":"2025-06-26T12:36:16.422Z","updated_at":"2025-11-13T15:01:15.219Z","avatar_url":"https://github.com/anandhuremanan.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to create Micro Front Ends With React and Svelte Using Webpack Module Federation.\n\nThis repository provides a minimal setup for a micro frontend architecture using React and Svelte, bundled with Webpack. The aim is to demonstrate how to integrate two different frameworks into a single application, leveraging Webpack's module federation to ensure a smooth and efficient build process.\n\n## Features\n\n- React and Svelte Integration: Combines the strengths of React and Svelte within a single application.\n- Webpack Module Federation: Allows independent deployment and loading of micro frontends.\n- Hot Module Replacement (HMR): Enables live reloading during development for a smooth developer experience.\n- Minimal Configuration: Focuses on simplicity and ease of understanding for beginners and experts alike.\n\n## Prerequisites\n\n- Node.js (\u003e= 14.x)\n- npm (\u003e= 6.x) or Yarn (\u003e= 1.x)\n\n## Getting Started\n\nClone the Repository\n\n```bash\ngit clone git@github.com:ananduremanan/ReactSvelteMicroFrontEnd.git\ncd react-svelte-micro-frontend\n```\n\nInstall Dependencies\n\n```bash\nnpm install\n```\n\nor\n\n```\nyarn install\n```\n\nStart the Development Server\n\n```\nnpm run start\n```\n\nor\n\n```\nyarn start\n```\n\n## Project Structure\n\n```\nreact-svelte-micro-frontend/\n├── react-app/                # React micro frontend\n│   ├── public/\n│   ├── src/\n│   ├── package.json\n│   └── webpack.config.js\n├── svelte-app/               # Svelte micro frontend\n│   ├── public/\n│   ├── src/\n│   ├── package.json\n│   └── webpack.config.js\n├── package.json\n└── README.md\n```\n\n## Configuration Details\n\nWebpack Module Federation : This uses a simplified version of webpack configuration and details regarding that can be found at [Here](https://gramfederation.vercel.app/).\n\n### Minimal Reproduction\n\nSevelte Remote\n\n```\nconst generateWebpackConfig = require(\"@grampro/svelte-mf-remote\");\n\nmodule.exports = generateWebpackConfig({\n  mode: process.env.NODE_ENV,\n  publicPath: \"http://localhost:8080/\",\n  federationConfig: {\n    name: \"header\",\n    filename: \"remoteEntry.js\",\n    exposes: {\n      \"./Dash\": \"./src/Dash.svelte\",\n      \"./Header\": \"./src/Header.svelte\",\n    },\n  },\n});\n```\n\nReact Consumer\n\n```\nconst webpackConfig = require(\"@grampro/react-mf-consumer\");\n\nmodule.exports = webpackConfig({\n  mode: \"production\",\n  publicPath: \"http://localhost:8082/\",\n  port: 8082,\n  federationConfig: {\n    name: \"consumer\",\n    filename: \"remoteEntry.js\",\n    remotes: {},\n    exposes: {},\n  },\n});\n```\n\n## Importing Components From Remote\n\n```\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"http://localhost:8080/remoteEntry.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"./index.css\" type=\"css\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"\"\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```\nimport { useEffect } from \"react\";\n\nconst DashBoard = () =\u003e {\n  useEffect(() =\u003e {\n    window.header.get(\"./Dash\").then((module: any) =\u003e {\n      const AwesomeDash = module().default;\n      new AwesomeDash({\n        target: document.getElementById(\"dash\"),\n      });\n    });\n  }, []);\n\n  return \u003cdiv id=\"dash\" className=\"text-xs m-4\"\u003e\u003c/div\u003e;\n};\n\nexport default DashBoard;\n```\n\n## Running the Apps\n\nStart the React App:\n\n```\ncd react-app\nnpm start\n```\n\nor\n\n```\nyarn start\n```\n\nThe React app will be available at http://localhost:8082.\n\nStart the Svelte App:\n\n```\ncd svelte-app\nnpm start\n```\n\nor\n\n```\nyarn start\n```\n\nThe Svelte app will be available at http://localhost:8080.\n\n## Credits\n\nHeavily Inspired By [Jack Herrington](https://github.com/jherr)\n\n## Contributing\n\nContributions are welcome! Please fork the repository and create a pull request with your changes. For major changes, please open an issue first to discuss what you would like to change.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanandhuremanan%2Freactsveltemicrofrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanandhuremanan%2Freactsveltemicrofrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanandhuremanan%2Freactsveltemicrofrontend/lists"}