{"id":31512675,"url":"https://github.com/wu9o/nexus-mf","last_synced_at":"2026-05-07T05:39:32.103Z","repository":{"id":308018283,"uuid":"1030736990","full_name":"wu9o/nexus-mf","owner":"wu9o","description":"NexusMF: A pluggable, sandbox-based micro-frontend framework for building scalable and isolated web applications. 🚀","archived":false,"fork":false,"pushed_at":"2025-09-21T06:54:35.000Z","size":350,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-03T00:48:19.776Z","etag":null,"topics":["javascript","micro-frontend","module-federation","monorepo","pnpm","react","sandbox","typescript","webpack","webpack-mf","webpack5"],"latest_commit_sha":null,"homepage":"","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/wu9o.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,"zenodo":null}},"created_at":"2025-08-02T08:00:46.000Z","updated_at":"2025-08-10T15:27:58.000Z","dependencies_parsed_at":"2025-08-08T05:26:09.360Z","dependency_job_id":null,"html_url":"https://github.com/wu9o/nexus-mf","commit_stats":null,"previous_names":["yf54/mf","wu9o/mf"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wu9o/nexus-mf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu9o%2Fnexus-mf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu9o%2Fnexus-mf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu9o%2Fnexus-mf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu9o%2Fnexus-mf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wu9o","download_url":"https://codeload.github.com/wu9o/nexus-mf/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu9o%2Fnexus-mf/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32725214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","micro-frontend","module-federation","monorepo","pnpm","react","sandbox","typescript","webpack","webpack-mf","webpack5"],"created_at":"2025-10-03T00:45:40.717Z","updated_at":"2026-05-07T05:39:32.097Z","avatar_url":"https://github.com/wu9o.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nexus MF - A Sandbox Framework for Webpack Module Federation\n\nA practical sandbox framework for building and experimenting with **Webpack Module Federation (MF)**. This project provides a core package `@nexus-mf/core` and a set of examples to help developers quickly learn, experiment with, and build scalable micro-frontend applications.\n\n**Keywords:** `webpack`, `webpack5`, `module-federation`, `mf`, `sandbox`, `micro-frontend`, `react`\n\n**[\u003e\u003e Live Demo \u003c\u003c](https://wu9o.github.io/nexus-mf/)**\n\n---\n\n**English** | [中文](./README.zh-CN.md)\n\n### Core Features\n\n- **Reusable Core Package**: The core sandboxing and Module Federation logic is encapsulated in the `@nexus-mf/core` package, allowing you to easily integrate it into your own projects.\n- **Pluggable Sandbox Mechanism**: Designed to support multiple sandboxing solutions (currently using Garfish), ensuring that each micro-app runs in a completely isolated environment to prevent style conflicts and global variable pollution.\n- **Module Federation**: Utilizes Webpack 5's Module Federation for dynamic, at-runtime loading of micro-apps.\n- **Monorepo Architecture**: Managed with `pnpm` workspaces, providing a streamlined development experience for both the core package and the examples.\n- **Centralized Configuration**: A dedicated `@mf/shared-config` package manages shared configurations for consistency and easy maintenance.\n- **Developer-Friendly**: Comes with a pre-configured CI/CD workflow for easy deployment and a clear solution for handling deep linking in SPA environments.\n\n### Architecture Overview\n\nNexusMF's architecture consists of a **Core Framework (`@nexus-mf/core`)** and multiple **Example Applications**.\n\n```\n+-------------------------------------------------+\n|                  Browser                        |\n| +---------------------------------------------+ |\n| |         Example Shell App (main-app)        | |\n| | +-----------------------------------------+ | |\n| | |         Layout (Nav Menu, Header)       | | |\n| | +-----------------------------------------+ | |\n| | |                                         | | |\n| | |  +-----------------------------------+  | | |\n| | |  |        Micro-App Sandbox          |  | | |\n| | |  |  (Rendered by @nexus-mf/core)     |  | | |\n| | |  +-----------------------------------+  | | |\n| | |                                         | | |\n| | +-----------------------------------------+ | |\n| +---------------------------------------------+ |\n+-------------------------------------------------+\n```\n\n- **Core Framework (`packages/core`)**:\n  - Provides the `SandboxMFE` component, which is responsible for creating a sandbox and loading a remote micro-frontend application.\n  - Can be published to npm and used as a dependency in any host application.\n\n- **Example Shell App (`examples/main-app`)**:\n  - Acts as the main container and entry point for the user.\n  - Manages the overall page layout, navigation menu, and routing logic.\n  - Imports and uses the `SandboxMFE` component from `@nexus-mf/core` to load micro-apps.\n\n- **Example Micro Apps (`examples/dashboard`, `examples/settings`, etc.)**:\n  - Are complete, standalone React applications.\n  - Are exposed as remote modules via Module Federation.\n  - Run inside a sandbox within the Shell App.\n\n### Key Implementation Details\n\n#### 1. Sandboxed MFE Loader (`packages/core/src/SandboxMFE.js`)\n\nThis is the core component of the framework. Instead of directly mounting a remote component, the `SandboxMFE` component performs the following steps:\n1. Creates a new sandbox instance using `@garfish/browser-vm`.\n2. Loads the micro-app's `remoteEntry.js` using the native `window` to make the container globally available.\n3. Injects the remote container, along with shared libraries like React, into the sandbox's global scope.\n4. Executes the bootstrap code of the micro-app inside the sandbox, effectively rendering the entire micro-app in an isolated environment.\n\n#### 2. Dependency Sharing\n\nTo optimize performance and ensure stability, critical libraries are shared between the shell application and all micro-apps. This is configured in the `ModuleFederationPlugin`'s `shared` option.\n\n#### 3. Deep Linking on GitHub Pages\n\nGitHub Pages is a static hosting service and does not natively support SPA routing. To solve 404 errors when accessing deep links directly (e.g., `/mf/dashboard/details`), we use a simple and effective trick:\n- The GitHub Actions deployment workflow (`.github/workflows/deploy.yml`) copies the root `index.html` to `404.html`.\n- When GitHub Pages encounters a non-existent path, it serves the `404.html` file, which is actually our main application.\n- React Router then picks up the URL from the address bar and renders the correct route.\n\n### Local Development\n\n1.  **Clone the repository:**\n    ```bash\n    git clone https://github.com/wu9o/nexus-mf.git\n    cd nexus-mf\n    ```\n\n2.  **Install dependencies:**\n    ```bash\n    pnpm install\n    ```\n\n3.  **Run all example applications concurrently:**\n    This command will start the Shell App and all micro-apps in parallel.\n    ```bash\n    pnpm --parallel --stream -r --filter \"./examples/**\" start\n    ```\n\n- Shell App: `http://localhost:3000`\n- Dashboard App: `http://localhost:3001`\n- User Management App: `http://localhost:3002`\n- Settings App: `http://localhost:3003`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwu9o%2Fnexus-mf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwu9o%2Fnexus-mf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwu9o%2Fnexus-mf/lists"}