{"id":25400750,"url":"https://github.com/delitamakanda/microfrontend","last_synced_at":"2026-05-05T22:43:19.955Z","repository":{"id":159435158,"uuid":"627347340","full_name":"delitamakanda/microfrontend","owner":"delitamakanda","description":"learning microfrontend architecture (wip)","archived":false,"fork":false,"pushed_at":"2024-11-18T13:17:34.000Z","size":4214,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T03:57:53.390Z","etag":null,"topics":["jotai","microfrontend","module-federation","primereact","react","vite"],"latest_commit_sha":null,"homepage":"https://resplendent-strudel-83725d.netlify.app/","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/delitamakanda.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":"2023-04-13T09:24:23.000Z","updated_at":"2024-11-18T13:17:39.000Z","dependencies_parsed_at":"2023-08-29T22:45:28.396Z","dependency_job_id":"55f9c020-1ef9-4863-b439-fa0b1519d62e","html_url":"https://github.com/delitamakanda/microfrontend","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delitamakanda%2Fmicrofrontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delitamakanda%2Fmicrofrontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delitamakanda%2Fmicrofrontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delitamakanda%2Fmicrofrontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/delitamakanda","download_url":"https://codeload.github.com/delitamakanda/microfrontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514206,"owners_count":21116900,"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":["jotai","microfrontend","module-federation","primereact","react","vite"],"created_at":"2025-02-16T00:29:35.514Z","updated_at":"2026-05-05T22:43:19.949Z","avatar_url":"https://github.com/delitamakanda.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Microfrontend Commerce Platform\n\nThis repository demonstrates a multi-frontend commerce experience composed of three independently deployed applications that cooperate through Module Federation. Each application can be developed and deployed on its own cadence while still sharing UI widgets, authentication, and routing contracts.\n\n## Table of Contents\n- [Architecture Overview](#architecture-overview)\n- [Getting Started](#getting-started)\n  - [Storefront (Vite)](#storefront-vite)\n  - [Admin Panel (Vite)](#admin-panel-vite)\n  - [Blog (Webpack)](#blog-webpack)\n- [Available Scripts](#available-scripts)\n- [Testing](#testing)\n- [Module Federation Layout](#module-federation-layout)\n- [Shared Utilities](#shared-utilities)\n- [Development Tips](#development-tips)\n- [Deployment Notes](#deployment-notes)\n- [Demo Links](#demo-links)\n- [License](#license)\n\n## Architecture Overview\n\n| Microfrontend | Tooling | Purpose | Port (Dev) |\n| ------------- | ------- | ------- | ---------- |\n| `storefront/` | Vite + React | Customer-facing shopping experience exposing shared UI and hooks. | `3000` |\n| `adminpanel/` | Vite + React | Back office dashboard that consumes storefront remotes and provides analytics tooling. | `5001` |\n| `blog/` | Webpack + React | Marketing blog rendered as a standalone bundle that can be embedded or linked from the storefront. | `8080` |\n\nThe two Vite applications are federated using [`@originjs/vite-plugin-federation`](https://github.com/originjs/vite-plugin-federation). The blog keeps a traditional Webpack configuration to showcase interop with a legacy build pipeline.\n\n## Getting Started\n\n### Prerequisites\n- Node.js 20+\n- [pnpm](https://pnpm.io/) 8+\n\nClone the repository and install the dependencies for each application individually (no workspace is defined):\n\n```bash\npnpm install --dir storefront\npnpm install --dir adminpanel\npnpm install --dir blog\n```\n\n### Storefront (Vite)\n```bash\ncd storefront\npnpm dev        # start the local dev server on http://localhost:3000\npnpm build      # produce a production bundle in dist/\n```\n\nEnvironment variables can be configured by copying `.env.example` to `.env` and adjusting the API host for product and auth data.\n\n### Admin Panel (Vite)\n```bash\ncd adminpanel\npnpm dev        # start the admin dev server on http://localhost:5001\npnpm build      # build the microfrontend that consumes storefront remotes\n```\n\nEnsure that the storefront dev server is running when testing remote components locally, or point `vite.config.js` to the deployed storefront remote entry.\n\n### Blog (Webpack)\n```bash\ncd blog\npnpm dev        # run webpack-dev-server on http://localhost:8080\npnpm build      # emit the production assets to dist/\n```\n\nThe blog relies on classic Webpack loaders and can be deployed independently to any static host.\n\n## Available Scripts\n\nEach microfrontend exposes a consistent set of package scripts:\n\n| Script | Description |\n| ------ | ----------- |\n| `pnpm dev` | Boot the development server with hot module reloading. |\n| `pnpm build` | Produce an optimized production bundle. |\n| `pnpm preview` | (Vite apps) Serve the built assets locally for smoke-testing. |\n| `pnpm lint` | Run ESLint with project-specific rules. |\n| `pnpm test` | Execute Node.js tests covering hooks, atoms, and utility helpers. |\n\nRun the command from the respective application directory.\n\n## Testing\n\nUnit tests are written with the native [`node:test`](https://nodejs.org/api/test.html) runner. Examples include:\n- `storefront/src/__tests__/store.test.js` validating Jotai cart state transitions.\n- `adminpanel/src/helpers/__tests__/utils.test.js` ensuring currency/amount formatting edge cases are handled.\n\nExecute the suites from the application folder:\n\n```bash\ncd storefront \u0026\u0026 pnpm test\ncd adminpanel \u0026\u0026 pnpm test\n```\n\n## Module Federation Layout\n\n- **Exposed modules:** The storefront shares UI primitives and hooks via `storefrontApp/*` remotes defined in `storefront/vite.config.js`.\n- **Remote consumption:** The admin panel declares the storefront as a remote in `adminpanel/vite.config.js` and lazy-loads shared widgets where needed.\n- **Shared libraries:** React, React DOM, and PrimeReact are configured as shared dependencies to avoid bundling duplicates across the Vite microfrontends.\n\nWhen adjusting remote URLs for staging or production, update the `remotes` map in each Vite config or rely on environment variables with `define` replacements.\n\n## Shared Utilities\n\nCommon cross-cutting concerns include:\n- **Authentication context** – Provided by the storefront and consumed by admin to keep session handling consistent.\n- **Axios instance** – Centralized interceptors manage token refresh and header decoration.\n- **Formatting helpers** – Located in `adminpanel/src/helpers/` with tests documenting expected behavior for monetary amounts.\n\nConsider extracting these into a shared package (via PNPM workspace) if the codebase grows.\n\n## Development Tips\n\n1. Start the storefront first so the admin remote loads without 404s.\n2. Keep an eye on `vite.config.js` flags such as `modulePreload` and `minify` when optimizing bundle size for production.\n3. Use the provided ESLint scripts before committing to enforce consistent React best practices.\n4. Run `pnpm build` periodically in each app to ensure Module Federation manifests remain compatible.\n\n## Deployment Notes\n\n- Output directories (`dist/`) can be deployed to any static CDN. Configure cache headers aggressively for files that include content hashes.\n- For Netlify/Static hosting, ensure redirects are configured for client-side routing (`/* -\u003e /index.html` for the Vite apps).\n- Align environment variable usage (`VITE_API_URL`, etc.) across microfrontends so they resolve against the same backend services.\n\n## Demo Links\n\n1. **Blog** – \u003chttps://mellifluous-cocada-015edf.netlify.app/\u003e\n2. **Admin panel** – \u003chttps://astonishing-dieffenbachia-7f20d2.netlify.app/\u003e\n3. **Storefront (WIP)** – \u003chttps://resplendent-strudel-83725d.netlify.app/\u003e\n\n## License\n\nThis project is provided for educational purposes. Adapt and extend it to fit your own microfrontend architecture needs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelitamakanda%2Fmicrofrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdelitamakanda%2Fmicrofrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelitamakanda%2Fmicrofrontend/lists"}