{"id":26869413,"url":"https://github.com/andrecrjr/module-federation-explorer","last_synced_at":"2026-03-10T03:01:05.591Z","repository":{"id":283929693,"uuid":"953317863","full_name":"andrecrjr/module-federation-explorer","owner":"andrecrjr","description":"Open Source vscode extension to show remotes and exposes in a polirepo vscode workspace","archived":false,"fork":false,"pushed_at":"2025-03-31T01:17:43.000Z","size":13142,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T02:24:49.242Z","etag":null,"topics":["extension","federation","front-end","module-federation","tool","vscode","vscode-extension","workspaces"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/andrecrjr.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":"2025-03-23T04:20:43.000Z","updated_at":"2025-03-29T22:34:47.000Z","dependencies_parsed_at":"2025-03-23T05:24:43.058Z","dependency_job_id":"4331d6fb-25aa-4d13-beac-4935f4b6577a","html_url":"https://github.com/andrecrjr/module-federation-explorer","commit_stats":null,"previous_names":["andrecrjr/module-federation-explorer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrecrjr%2Fmodule-federation-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrecrjr%2Fmodule-federation-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrecrjr%2Fmodule-federation-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrecrjr%2Fmodule-federation-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrecrjr","download_url":"https://codeload.github.com/andrecrjr/module-federation-explorer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246423719,"owners_count":20774820,"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":["extension","federation","front-end","module-federation","tool","vscode","vscode-extension","workspaces"],"created_at":"2025-03-31T06:16:49.314Z","updated_at":"2026-03-10T03:01:05.512Z","avatar_url":"https://github.com/andrecrjr.png","language":"TypeScript","funding_links":["https://ko-fi.com/andrecrjr"],"categories":[],"sub_categories":[],"readme":"# Module Federation Explorer for Visual Studio Code\n\n\u003cdiv style=\"display:flex;width:100%;justify-content:center\"\u003e\n\u003cimg src=\"./media/mfe-explorer-logo-big.png\" alt=\"Module Federation Explorer Logo\" width=\"450\"/\u003e\n\u003c/div\u003e\n\nThe **Module Federation Explorer** is a Visual Studio Code extension designed for **local development** that helps you explore, manage, and orchestrate Module Federation applications directly from your workspace. With integrated terminal support, you can start, stop, and monitor your micro-frontends without leaving your editor.\n\n\n[![DeepWiki](https://img.shields.io/badge/DeepWiki-andrecrjr%2Fmodule--federation--explorer-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAA05JREFUaEPtmUtyEzEQhtWTQyQLHNak2AB7ZnyXZMEjXMGeK/AIi+QuHrMnbChYY7MIh8g01fJoopFb0uhhEqqcbWTp06/uv1saEDv4O3n3dV60RfP947Mm9/SQc0ICFQgzfc4CYZoTPAswgSJCCUJUnAAoRHOAUOcATwbmVLWdGoH//PB8mnKqScAhsD0kYP3j/Yt5LPQe2KvcXmGvRHcDnpxfL2zOYJ1mFwrryWTz0advv1Ut4CJgf5uhDuDj5eUcAUoahrdY/56ebRWeraTjMt/00Sh3UDtjgHtQNHwcRGOC98BJEAEymycmYcWwOprTgcB6VZ5JK5TAJ+fXGLBm3FDAmn6oPPjR4rKCAoJCal2eAiQp2x0vxTPB3ALO2CRkwmDy5WohzBDwSEFKRwPbknEggCPB/imwrycgxX2NzoMCHhPkDwqYMr9tRcP5qNrMZHkVnOjRMWwLCcr8ohBVb1OMjxLwGCvjTikrsBOiA6fNyCrm8V1rP93iVPpwaE+gO0SsWmPiXB+jikdf6SizrT5qKasx5j8ABbHpFTx+vFXp9EnYQmLx02h1QTTrl6eDqxLnGjporxl3NL3agEvXdT0WmEost648sQOYAeJS9Q7bfUVoMGnjo4AZdUMQku50McDcMWcBPvr0SzbTAFDfvJqwLzgxwATnCgnp4wDl6Aa+Ax283gghmj+vj7feE2KBBRMW3FzOpLOADl0Isb5587h/U4gGvkt5v60Z1VLG8BhYjbzRwyQZemwAd6cCR5/XFWLYZRIMpX39AR0tjaGGiGzLVyhse5C9RKC6ai42ppWPKiBagOvaYk8lO7DajerabOZP46Lby5wKjw1HCRx7p9sVMOWGzb/vA1hwiWc6jm3MvQDTogQkiqIhJV0nBQBTU+3okKCFDy9WwferkHjtxib7t3xIUQtHxnIwtx4mpg26/HfwVNVDb4oI9RHmx5WGelRVlrtiw43zboCLaxv46AZeB3IlTkwouebTr1y2NjSpHz68WNFjHvupy3q8TFn3Hos2IAk4Ju5dCo8B3wP7VPr/FGaKiG+T+v+TQqIrOqMTL1VdWV1DdmcbO8KXBz6esmYWYKPwDL5b5FA1a0hwapHiom0r/cKaoqr+27/XcrS5UwSMbQAAAABJRU5ErkJggg==)](https://deepwiki.com/andrecrjr/module-federation-explorer)\n\n## 🚀 Key Highlights\n\n- **Local Development First**: Built specifically for local development workflows\n- **Terminal Integration**: Execute commands directly in VS Code's integrated terminal\n- **Multi-Platform Support**: Works with Webpack, Vite, and ModernJS Module Federation setups\n- **Zero Configuration**: Automatically detects your Module Federation configurations\n- **Visual Management**: Tree view interface for easy navigation and control\n\n## 📋 Prerequisites\n\n- Visual Studio Code version 1.80.0 or higher\n- Node.js and a package manager (npm, yarn, or pnpm)\n- A local workspace with Module Federation configuration\n\n## 🛠️ Installation\n\n1. Open Visual Studio Code\n2. Go to the Extensions Marketplace (`Ctrl+Shift+X` or `Cmd+Shift+X` on macOS)\n3. Search for \"Module Federation Explorer\"\n4. Click \"Install\"\n\n## 🎯 Getting Started\n\n### 1. Automatic Activation\nThe extension automatically activates when it detects any of these files in your workspace:\n- `webpack.config.js` or `webpack.config.ts`\n- `vite.config.js` or `vite.config.ts`\n- `module-federation.config.js` or `module-federation.config.ts`\n- `.vscode/mf-explorer.roots.json`\n\n### 2. Initial Configuration\nBefore adding hosts, set up your configuration:\n- Click the gear icon in the Module Federation Explorer view, or\n- Use Command Palette (`Ctrl/Cmd + Shift + P`) → `Module Federation: Change Configuration File`\n\n### 3. Access the Explorer\nFind the \"Module Federation Explorer\" view in your VS Code sidebar to start managing your micro-frontends.\n\n## ✨ Features\n\n### 🏠 Host Application Management\n- **Add/Remove Hosts**: Manage multiple host applications in your workspace\n- **Custom Start Commands**: Configure specific startup commands for each host\n- **Terminal Execution**: All commands run in VS Code's integrated terminal\n- **Status Monitoring**: Visual indicators show which applications are running\n\n### 🔗 Remote Application Control\n- **Start/Stop Remotes**: Control remote applications with a single click\n- **Custom Build Commands**: Configure build and start commands per remote\n- **Package Manager Detection**: Automatically detects npm, yarn, or pnpm\n- **Real-time Status**: See which remotes are currently running\n\n### ⚙️ Configuration Management\n- **Auto-Detection**: Automatically finds and parses configuration files\n- **Multi-Framework Support**: Webpack, Vite, and ModernJS configurations\n- **Persistent Settings**: Stores configuration in `.vscode/mf-explorer.roots.json`\n- **File Watching**: Real-time updates when configurations change\n\n### 🧭 Navigation \u0026 Discovery\n- **Module Explorer**: Browse exposed modules from each remote\n- **Direct File Access**: Click to open module source files\n- **Dependency Visualization**: Interactive graph showing host-remote relationships\n- **Quick Navigation**: Jump between related files and configurations\n\n## 📖 Usage Guide\n\n### Managing Hosts\n1. **Add Host**: Click the \"+\" button in the explorer view\n2. **Configure**: Right-click on any host to:\n   - Start/stop the application (runs in terminal)\n   - Modify start commands\n   - Remove from workspace\n\n### Controlling Remotes\n1. **Start/Stop**: Right-click on any remote for quick actions\n2. **Configure**: Set custom build and start commands\n3. **Monitor**: Visual status indicators show running state\n4. **Navigate**: Click on exposed modules to view source code\n\n### Terminal Integration\nAll operations execute in VS Code's integrated terminal, giving you:\n- Full visibility of command output\n- Ability to interact with running processes\n- Standard terminal features (scrollback, search, etc.)\n- Multiple terminal sessions for concurrent operations\n\n## 🎮 Available Commands\n\nAccess these via Command Palette (`Ctrl/Cmd + Shift + P`):\n\n| Command | Description |\n|---------|-------------|\n| `Module Federation: Refresh` | Refresh the explorer view |\n| `Module Federation: Add New Host Folder` | Add a new host application |\n| `Module Federation: Remove Host Folder` | Remove a host from workspace |\n| `Module Federation: Change Configuration File` | Update configuration settings |\n| `Module Federation: Start Host App` | Start the host application |\n| `Module Federation: Stop Host App` | Stop the host application |\n| `Module Federation: Configure Root App` | Configure host settings |\n| `Module Federation: Show Dependency Graph` | Visualize architecture |\n| `Module Federation: Start Remote` | Start a remote application |\n| `Module Federation: Stop Remote` | Stop a remote application |\n| `Module Federation: Show Welcome` | Display welcome guide |\n| `Module Federation: Open View` | Open the explorer view |\n| `Module Federation: Focus View` | Focus on the explorer |\n\n## 🔧 Supported Configurations\n\nThe extension automatically detects and works with:\n\n- **Webpack**: `webpack.config.js`, `webpack.config.ts`\n- **Vite**: `vite.config.js`, `vite.config.ts`\n- **ModernJS**: `module-federation.config.js`, `module-federation.config.ts`\n\nBoth JavaScript and TypeScript configuration files are supported.\n\n## 💡 Tips for Local Development\n\n- **Multiple Terminals**: The extension creates separate terminal sessions for each application\n- **Port Management**: Ensure your hosts and remotes use different ports\n- **Hot Reload**: Changes to configurations are automatically detected\n- **Dependency Tracking**: Use the dependency graph to understand your architecture\n\n## 🤝 Support the Project\n\nIf this extension improves your Module Federation development experience:\n\n\u003ca href=\"https://ko-fi.com/andrecrjr\"\u003e\n  \u003cimg src=\"https://cdn.prod.website-files.com/5c14e387dab576fe667689cf/670f5a01c01ea9191809398c_support_me_on_kofi_blue-p-500.png\" alt=\"Support on Ko-fi\" width=\"200\"/\u003e\n\u003c/a\u003e\n\n## 🤝 Contributing\n\nWe welcome contributions! Please submit Pull Requests at:\n[https://github.com/andrecrjr/module-federation-explorer](https://github.com/andrecrjr/module-federation-explorer)\n\n## 📄 License\n\nThis extension is released under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrecrjr%2Fmodule-federation-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrecrjr%2Fmodule-federation-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrecrjr%2Fmodule-federation-explorer/lists"}