This 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.

• Architecture Overview
• Getting Started
  • Storefront (Vite)
  • Admin Panel (Vite)
  • Blog (Webpack)
• Available Scripts
• Testing
• Module Federation Layout
• Shared Utilities
• Development Tips
• Deployment Notes
• Demo Links
• License

The two Vite applications are federated using @originjs/vite-plugin-federation. The blog keeps a traditional Webpack configuration to showcase interop with a legacy build pipeline.

• Node.js 20+
• pnpm 8+

Clone the repository and install the dependencies for each application individually (no workspace is defined):

pnpm install --dir storefront
pnpm install --dir adminpanel
pnpm install --dir blog

cd storefront
pnpm dev        # start the local dev server on http://localhost:3000
pnpm build      # produce a production bundle in dist/

Environment variables can be configured by copying .env.example to .env and adjusting the API host for product and auth data.

cd adminpanel
pnpm dev        # start the admin dev server on http://localhost:5001
pnpm build      # build the microfrontend that consumes storefront remotes

Ensure that the storefront dev server is running when testing remote components locally, or point vite.config.js to the deployed storefront remote entry.

cd blog
pnpm dev        # run webpack-dev-server on http://localhost:8080
pnpm build      # emit the production assets to dist/

The blog relies on classic Webpack loaders and can be deployed independently to any static host.

Each microfrontend exposes a consistent set of package scripts:

Run the command from the respective application directory.

Unit tests are written with the native node:test runner. Examples include:

• storefront/src/__tests__/store.test.js validating Jotai cart state transitions.
• adminpanel/src/helpers/__tests__/utils.test.js ensuring currency/amount formatting edge cases are handled.

Execute the suites from the application folder:

cd storefront && pnpm test
cd adminpanel && pnpm test

• Exposed modules: The storefront shares UI primitives and hooks via storefrontApp/* remotes defined in storefront/vite.config.js.
• Remote consumption: The admin panel declares the storefront as a remote in adminpanel/vite.config.js and lazy-loads shared widgets where needed.
• Shared libraries: React, React DOM, and PrimeReact are configured as shared dependencies to avoid bundling duplicates across the Vite microfrontends.

When adjusting remote URLs for staging or production, update the remotes map in each Vite config or rely on environment variables with define replacements.

Common cross-cutting concerns include:

• Authentication context – Provided by the storefront and consumed by admin to keep session handling consistent.
• Axios instance – Centralized interceptors manage token refresh and header decoration.
• Formatting helpers – Located in adminpanel/src/helpers/ with tests documenting expected behavior for monetary amounts.

Consider extracting these into a shared package (via PNPM workspace) if the codebase grows.

1. Start the storefront first so the admin remote loads without 404s.
2. Keep an eye on vite.config.js flags such as modulePreload and minify when optimizing bundle size for production.
3. Use the provided ESLint scripts before committing to enforce consistent React best practices.
4. Run pnpm build periodically in each app to ensure Module Federation manifests remain compatible.

• Output directories (dist/) can be deployed to any static CDN. Configure cache headers aggressively for files that include content hashes.
• For Netlify/Static hosting, ensure redirects are configured for client-side routing (/* -> /index.html for the Vite apps).
• Align environment variable usage (VITE_API_URL, etc.) across microfrontends so they resolve against the same backend services.

1. Blog – https://mellifluous-cocada-015edf.netlify.app/
2. Admin panel – https://astonishing-dieffenbachia-7f20d2.netlify.app/
3. Storefront (WIP) – https://resplendent-strudel-83725d.netlify.app/

This project is provided for educational purposes. Adapt and extend it to fit your own microfrontend architecture needs.