{"_id":"3xmf-miniapp-generator","_rev":"2-dc2ec82a8b5e1e83ff7524ac78df90a0","name":"3xmf-miniapp-generator","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"3xmf-miniapp-generator","version":"1.0.0","keywords":["micro-frontend","cli","generator","module-federation","webpack"],"author":"","license":"ISC","_id":"3xmf-miniapp-generator@1.0.0","maintainers":[{"name":"hdthinh1012","email":"hdthinh01@gmail.com"}],"bin":{"3xmf-miniapp-generator":"bin/generate-microfrontend-app.js"},"dist":{"shasum":"2aad816fba673009a385417d44d39f9fbbc3bffa","tarball":"https://registry.npmjs.org/3xmf-miniapp-generator/-/3xmf-miniapp-generator-1.0.0.tgz","fileCount":3,"integrity":"sha512-qZGTxZmiI74eYWZHvEzXyHIuMKMkQ2JJOlBQtwTH31DmJqFXvESWy99QcwFilntnxKBISA38R4ua9lBHNlT+sA==","signatures":[{"sig":"MEUCIA8ttM2SDWmEHmgRxLH1pogbnMUq2Vg5saN9B2lAyDyvAiEA8zXnT3a0xjLD680j3VS2wM+cKGlHA94YlC7QbwSPi60=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13705},"main":"bin/generate-microfrontend-app.js","gitHead":"3fb558cf1a5d4cc977f47df0015c4775905f629a","scripts":{"start":"node bin/generate-microfrontend-app.js"},"_npmUser":{"name":"hdthinh1012","actor":{"name":"hdthinh1012","type":"user","email":"hdthinh01@gmail.com"},"email":"hdthinh01@gmail.com"},"_npmVersion":"10.8.2","description":"Multi-Framework Micro-Frontend Module Federation - CLI tool to generate micro-frontend apps with Module Federation","directories":{},"_nodeVersion":"18.20.8","dependencies":{"uuid":"^9.0.1","inquirer":"^8.2.6"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3xmf-miniapp-generator_1.0.0_1751813713905_0.749296514953641","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"3xmf-miniapp-generator","version":"1.0.1","description":"Multi-Framework Micro-Frontend Module Federation - CLI tool to generate micro-frontend apps with Module Federation","main":"bin/generate-microfrontend-app.js","bin":{"3xmf-miniapp-generator":"bin/generate-microfrontend-app.js"},"scripts":{"start":"node bin/generate-microfrontend-app.js"},"keywords":["micro-frontend","cli","generator","module-federation","webpack"],"author":"","license":"ISC","dependencies":{"inquirer":"^8.2.6","uuid":"^9.0.1"},"_id":"3xmf-miniapp-generator@1.0.1","gitHead":"3fb558cf1a5d4cc977f47df0015c4775905f629a","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-0ZkIwcP2BH392Bk3EWomeR34B81Ma9dvVBUR1+iOLvxqA5x1L6iCDXwR40rRJACM2WPg4i7ZoI2YtUY6fbONWg==","shasum":"827e48349054022a7217dfa3d97ffa54c2235706","tarball":"https://registry.npmjs.org/3xmf-miniapp-generator/-/3xmf-miniapp-generator-1.0.1.tgz","fileCount":3,"unpackedSize":18391,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAjWpUIAtaY9CcCBN3XenivFMXD4odkeyf8rcjCasx6rAiA6J1T0oT949NeKohUQUgln9COYZkD7UEiVrOnVKCEQcg=="}]},"_npmUser":{"name":"hdthinh1012","email":"hdthinh01@gmail.com"},"directories":{},"maintainers":[{"name":"hdthinh1012","email":"hdthinh01@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3xmf-miniapp-generator_1.0.1_1753251890161_0.6961703348011152"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-06T14:55:13.904Z","modified":"2025-07-23T06:24:50.671Z","1.0.0":"2025-07-06T14:55:14.086Z","1.0.1":"2025-07-23T06:24:50.466Z"},"license":"ISC","keywords":["micro-frontend","cli","generator","module-federation","webpack"],"description":"Multi-Framework Micro-Frontend Module Federation - CLI tool to generate micro-frontend apps with Module Federation","maintainers":[{"name":"hdthinh1012","email":"hdthinh01@gmail.com"}],"readme":"# 3xMF MiniApp Generator\r\n\r\n**Multi-Framework Micro-Frontend Module Federation CLI Tool**\r\n\r\nA comprehensive CLI tool to generate micro-frontend applications using Webpack Module Federation for React, Vue, and Angular frameworks.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install -g 3xmf-miniapp-generator\r\n```\r\n\r\n## Usage\r\n\r\nAfter installation, you can generate a new micro-frontend app by running:\r\n\r\n```bash\r\n3xmf-miniapp-generator\r\n```\r\n\r\nThe tool will prompt you for:\r\n- **Framework**: Choose between React, Vue, or Angular\r\n- **App name** (default: mini_app_example)\r\n  - ⚠️ **Important**: Use underscores (_) instead of hyphens (-) in the app name\r\n  - This is a requirement of Webpack Module Federation\r\n  - Example: `product_app`, `cart_app`, `user_app`\r\n- **Expose key** (default: mount)\r\n- **Expose value** (default: ./bootstrap for React/Vue, for Angular since the under-the-hood webpack-module-federation demands each Angular app's expose value must be unique for 2 Angular importing each other easily, the generator will autogenerate an expose value for you, just click enter to proceed)\r\n- **Port number** (default: 3000 for React, 8080 for Vue, 4200 for Angular)\r\n\r\n## Supported Frameworks\r\n\r\n### 🔵 React Applications\r\n- Modern React 18+ setup\r\n- Webpack Module Federation configuration\r\n- Event-based cross-framework communication\r\n- Hot module replacement for development\r\n\r\n### 🔷 Vue Applications  \r\n- Vue 3 Composition API\r\n- Webpack Module Federation integration\r\n- Custom event system for microfrontend communication\r\n- Development server with hot reload\r\n\r\n### 🔺 Angular Applications\r\n- Angular 19+ with standalone components support\r\n- Module Federation via Angular libraries\r\n- Custom event-based communication system\r\n- Angular CLI integration\r\n\r\n## Generated App Structure\r\n\r\n### React App Structure\r\n```\r\nyour_react_app/\r\n├── public/\r\n│   └── index.html\r\n├── src/\r\n│   ├── App.jsx\r\n│   ├── EventComponent.jsx\r\n│   └── components/\r\n├── helpers/\r\n│   ├── EmbededMicroFrontEnd.jsx\r\n│   ├── eventManager.js\r\n│   └── loadRemoteModule.js\r\n├── webpack/\r\n│   └── webpack.config.js\r\n├── bootstrap.jsx\r\n├── index.jsx\r\n└── package.json\r\n```\r\n\r\n### Vue App Structure\r\n```\r\nyour_vue_app/\r\n├── public/\r\n│   └── index.html\r\n├── src/\r\n│   ├── App.vue\r\n│   └── EventComponent.vue\r\n├── helpers/\r\n│   ├── EmbededMicroFrontEnd.vue\r\n│   ├── eventManager.js\r\n│   └── loadRemoteModule.js\r\n├── webpack/\r\n│   └── webpack.config.js\r\n├── bootstrap.js\r\n├── index.js\r\n└── package.json\r\n```\r\n\r\n### Angular App Structure\r\n```\r\nyour_angular_app/\r\n├── projects/\r\n│   ├── microfrontend-loader/\r\n│   │   └── src/lib/\r\n│   │       ├── components/embedded-microfrontend/\r\n│   │       └── services/remote-loader.service.ts\r\n│   └── event-component/\r\n│       └── src/lib/\r\n│           ├── event-component.component.ts\r\n│           └── event-component.module.ts\r\n├── src/\r\n│   └── app/\r\n├── webpack/\r\n│   └── webpack.config.js\r\n└── angular.json\r\n```\r\n\r\n## Cross-Framework Communication\r\n\r\nAll generated apps include event-based communication systems that allow microfrontends from different frameworks to communicate with each other using native CustomEvent API.\r\n\r\n### Event Types\r\n- `reactMessage` - Events from React microfrontends\r\n- `vueMessage` - Events from Vue microfrontends  \r\n- `angularMessage` - Events from Angular microfrontends\r\n\r\n### Example Communication\r\n```javascript\r\n// Send event from any framework\r\nwindow.dispatchEvent(new CustomEvent(\"reactMessage\", { \r\n  detail: \"Hello from React!\" \r\n}));\r\n\r\n// Listen for events in any framework\r\nwindow.addEventListener('vueMessage', (event) => {\r\n  console.log('Received from Vue:', event.detail);\r\n});\r\n```\r\n\r\n## Importing Micro-Frontends\r\n\r\n### React - Using EmbededMicroFrontEnd Component\r\n\r\n```jsx\r\nimport EmbededMicroFrontEnd from \"./helpers/EmbededMicroFrontEnd\";\r\n\r\n<EmbededMicroFrontEnd\r\n  remoteUrl=\"http://localhost:3001/remoteEntry.js\"\r\n  scope=\"remote_app_name\"\r\n  module=\"./mount\"\r\n/>\r\n```\r\n\r\n### Vue - Using EmbededMicroFrontEnd Component\r\n\r\n```vue\r\n<template>\r\n  <EmbededMicroFrontEnd\r\n    :remoteUrl=\"'http://localhost:8081/remoteEntry.js'\"\r\n    :scope=\"'remote_app_name'\"\r\n    :module=\"'./mount'\"\r\n  />\r\n</template>\r\n\r\n<script>\r\nimport EmbededMicroFrontEnd from \"./helpers/EmbededMicroFrontEnd.vue\";\r\n\r\nexport default {\r\n  components: {\r\n    EmbededMicroFrontEnd\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\n### Angular - Using app-embedded-microfrontend Component\r\n\r\n```html\r\n<app-embedded-microfrontend\r\n  [remoteUrl]=\"'http://localhost:4201/remoteEntry.js'\"\r\n  [scope]=\"'remote_app_name'\"\r\n  [module]=\"'./mount'\"\r\n  [type]=\"'module'\">\r\n</app-embedded-microfrontend>\r\n```\r\n\r\n```typescript\r\n// In your module\r\nimport { MicrofrontendLoaderModule } from 'microfrontend-loader';\r\n\r\n@NgModule({\r\n  imports: [MicrofrontendLoaderModule]\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n## Cross-Framework Import Examples\r\n\r\n### React Host importing Vue Microfrontend\r\n```jsx\r\n// React component importing Vue app\r\n<EmbededMicroFrontEnd\r\n  remoteUrl=\"http://localhost:8080/remoteEntry.js\"\r\n  scope=\"vue_product_app\"\r\n  module=\"./mount\"\r\n/>\r\n```\r\n\r\n### Vue Host importing Angular Microfrontend\r\n```vue\r\n<template>\r\n  <EmbededMicroFrontEnd\r\n    :remoteUrl=\"'http://localhost:4200/remoteEntry.js'\"\r\n    :scope=\"'angular_user_app'\"\r\n    :module=\"'./mount'\"\r\n  />\r\n</template>\r\n```\r\n\r\n### Angular Host importing React Microfrontend\r\n```html\r\n<app-embedded-microfrontend\r\n  [remoteUrl]=\"'http://localhost:3000/remoteEntry.js'\"\r\n  [scope]=\"'react_cart_app'\"\r\n  [module]=\"'./mount'\">\r\n</app-embedded-microfrontend>\r\n```\r\n\r\n## Parameters Explained\r\n\r\n### Common Parameters for All Frameworks:\r\n\r\n1. **`remoteUrl`**: The URL to the remote app's entry point\r\n   - Format: `http://localhost:<port>/remoteEntry.js`\r\n   - This is the URL where the remote app is serving its Module Federation bundle\r\n\r\n2. **`scope`**: The name of the remote app\r\n   - Must match the `name` field in the remote app's package.json\r\n   - ⚠️ **Important**: Use underscores (_) instead of hyphens (-) in the app name\r\n   - This is a requirement of Webpack Module Federation\r\n   - Example: `product_app`, `cart_app`, `user_app`\r\n\r\n3. **`module`**: The exposed module path\r\n   - Must match the `exposes` key in the remote app's webpack.config.js\r\n   - This is the entry point you want to import from the remote app\r\n   - Default: `\"./mount\"`\r\n\r\n### Angular-specific Parameters:\r\n\r\n4. **`type`** (Angular only): The script type for loading the remote\r\n   - Default: `'text/javascript'`\r\n   - For ES modules: `'module'`\r\n\r\n## Getting Started with Generated App\r\n\r\n### React\r\n```bash\r\ncd your_react_app\r\nnpm install\r\nnpm start  # Runs on port 3000\r\n```\r\n\r\n### Vue\r\n```bash\r\ncd your_vue_app\r\nnpm install\r\nnpm run serve  # Runs on port 8080\r\n```\r\n\r\n### Angular\r\n```bash\r\ncd your_angular_app\r\nnpm install\r\nng build microfrontend-loader # Microfrontend Loader component is extracted as seperate library\r\nng serve  # Runs on port 4200\r\n```\r\n\r\n## Publish NPM\r\n\r\n1. Change directory to this folder\r\n2. Run command `npm login`\r\n3. Run command `npm publish`\r\n\r\n## Features\r\n\r\n- **Multi-framework support**: React, Vue, and Angular\r\n- **Webpack Module Federation**: Pre-configured for all frameworks\r\n- **Cross-framework communication**: Event-based messaging system\r\n- **Hot module replacement**: Development server with live reload\r\n- **TypeScript support**: Full TypeScript configuration for Angular\r\n- **Modern tooling**: Latest versions of each framework\r\n- **Production ready**: Optimized build configurations\r\n\r\n## License\r\n\r\nISC ","readmeFilename":"README.md"}