From 01a5fa694dd2defbbf69f906573d8c4faadb9777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Wed, 5 Mar 2025 19:47:10 +0100
Subject: [PATCH 1/6] feat: add zephyr options to CLI

---
 .../create-module-federation/src/create.ts    | 73 +++++++++++++++++--
 .../create-module-federation/src/index.ts     |  9 +++
 .../zephyr-rspack-consumer/README.md          | 33 +++++++++
 .../module-federation.config.ts.handlebars    | 15 ++++
 .../package.json.handlebars                   | 24 ++++++
 .../zephyr-rspack-consumer/public/index.html  | 11 +++
 .../zephyr-rspack-consumer/rspack.config.ts   | 51 +++++++++++++
 .../zephyr-rspack-consumer/src/App.tsx        | 18 +++++
 .../zephyr-rspack-consumer/src/bootstrap.tsx  |  7 ++
 .../zephyr-rspack-consumer/src/index.ts       |  1 +
 .../zephyr-rspack-consumer/tsconfig.json      | 26 +++++++
 .../zephyr-rspack-provider/README.md          | 33 +++++++++
 .../module-federation.config.ts.handlebars    | 15 ++++
 .../package.json.handlebars                   | 22 ++++++
 .../zephyr-rspack-provider/public/index.html  | 11 +++
 .../zephyr-rspack-provider/rspack.config.ts   | 51 +++++++++++++
 .../zephyr-rspack-provider/src/App.tsx        | 14 ++++
 .../zephyr-rspack-provider/src/Card.tsx       | 26 +++++++
 .../zephyr-rspack-provider/src/bootstrap.tsx  |  7 ++
 .../zephyr-rspack-provider/src/index.ts       |  1 +
 .../zephyr-rspack-provider/tsconfig.json      | 26 +++++++
 .../templates/zephyr-vite-consumer/README.md  | 45 ++++++++++++
 .../templates/zephyr-vite-consumer/index.html | 12 +++
 .../module-federation.config.ts.handlebars    | 19 +++++
 .../package.json.handlebars                   | 31 ++++++++
 .../zephyr-vite-consumer/src/main.jsx         | 49 +++++++++++++
 .../zephyr-vite-consumer/tsconfig.json        | 22 ++++++
 .../zephyr-vite-consumer/vite.config.ts       | 14 ++++
 .../templates/zephyr-vite-provider/README.md  | 39 ++++++++++
 .../templates/zephyr-vite-provider/index.html | 12 +++
 .../module-federation.config.ts.handlebars    | 17 +++++
 .../package.json.handlebars                   | 31 ++++++++
 .../zephyr-vite-provider/src/Footer.tsx       | 43 +++++++++++
 .../zephyr-vite-provider/src/main.tsx         | 44 +++++++++++
 .../zephyr-vite-provider/tsconfig.json        | 22 ++++++
 .../zephyr-vite-provider/vite.config.ts       | 19 +++++
 .../zephyr-webpack-consumer/README.md         | 42 +++++++++++
 .../package.json.handlebars                   | 27 +++++++
 .../zephyr-webpack-consumer/public/index.html | 11 +++
 .../zephyr-webpack-consumer/src/bootstrap.jsx | 21 ++++++
 .../zephyr-webpack-consumer/src/index.js      |  1 +
 .../zephyr-webpack-consumer/tsconfig.json     | 22 ++++++
 .../zephyr-webpack-consumer/webpack.config.ts | 51 +++++++++++++
 .../zephyr-webpack-provider/README.md         | 33 +++++++++
 .../package.json.handlebars                   | 27 +++++++
 .../zephyr-webpack-provider/public/index.html | 11 +++
 .../zephyr-webpack-provider/src/Button.tsx    | 23 ++++++
 .../zephyr-webpack-provider/src/bootstrap.tsx | 18 +++++
 .../zephyr-webpack-provider/src/index.ts      |  1 +
 .../zephyr-webpack-provider/tsconfig.json     | 22 ++++++
 .../zephyr-webpack-provider/webpack.config.ts | 51 +++++++++++++
 51 files changed, 1247 insertions(+), 7 deletions(-)
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/README.md
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/README.md
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/index.html
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/src/main.jsx
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/README.md
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/index.html
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json
 create mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.jsx
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.js
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/README.md
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/src/index.ts
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json
 create mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts

diff --git a/packages/create-module-federation/src/create.ts b/packages/create-module-federation/src/create.ts
index 04175c63e36..d6b6c84ec10 100644
--- a/packages/create-module-federation/src/create.ts
+++ b/packages/create-module-federation/src/create.ts
@@ -32,9 +32,10 @@ type Argv = {
   override?: boolean;
 };
 
-type ProjectType = 'lib' | 'app';
+type ProjectType = 'lib' | 'app' | 'zephyr';
 type RoleType = 'consumer' | 'provider';
 type AppTemplateName = 'modern' | 'rsbuild';
+type ZephyrTemplateName = 'webpack' | 'rspack' | 'vite';
 type LibTemplateName = 'rslib';
 type ProviderInfo = {
   name: string;
@@ -58,7 +59,13 @@ function logHelpMessage(name: string, templates: string[]) {
 
    Templates:
 
-     ${templates.join(', ')}
+     Standard Templates:
+     ${templates.filter((t) => !t.startsWith('zephyr')).join(', ')}
+
+     Zephyr Integration Templates:
+     - Webpack: ${templates.filter((t) => t.startsWith('zephyr-webpack')).join(', ')}
+     - Rspack: ${templates.filter((t) => t.startsWith('zephyr-rspack')).join(', ')}
+     - Vite: ${templates.filter((t) => t.startsWith('zephyr-vite')).join(', ')}
 `);
 }
 
@@ -130,6 +137,32 @@ async function getAppTemplateName(
   return `${roleType}-${framework}-ts`;
 }
 
+async function getZephyrTemplateName(
+  {
+    roleType,
+  }: {
+    roleType: RoleType;
+  },
+  { template }: Argv,
+) {
+  if (template) {
+    return template;
+  }
+
+  const framework = checkCancel<ZephyrTemplateName>(
+    await select({
+      message: 'Select Zephyr integration',
+      options: [
+        { value: 'webpack', label: 'Webpack' },
+        { value: 'rspack', label: 'Rspack' },
+        { value: 'vite', label: 'Vite' },
+      ],
+    }),
+  );
+
+  return `zephyr-${framework}-${roleType}`;
+}
+
 async function getLibTemplateName({ template }: Argv) {
   if (template) {
     return `${template}-ts`;
@@ -176,7 +209,7 @@ function getTemplateName(
   }: {
     projectType: ProjectType;
     roleType: RoleType;
-    framework: AppTemplateName;
+    framework: AppTemplateName | null;
   },
   args: Argv,
 ) {
@@ -184,7 +217,14 @@ function getTemplateName(
     return getAppTemplateName(
       {
         roleType,
-        framework,
+        framework: framework as AppTemplateName,
+      },
+      args,
+    );
+  } else if (projectType === 'zephyr') {
+    return getZephyrTemplateName(
+      {
+        roleType,
       },
       args,
     );
@@ -207,7 +247,7 @@ async function forgeTemplate({
   templateParameters: Record<string, string>;
   distFolder: string;
 }) {
-  let framework: AppTemplateName = 'modern';
+  let framework: AppTemplateName | null = 'modern';
   let roleType: RoleType = 'provider';
 
   if (projectType === 'app') {
@@ -221,6 +261,19 @@ async function forgeTemplate({
       }),
     );
 
+    roleType = checkCancel<RoleType>(
+      await select({
+        message: 'Please select the role of project you want to create:',
+        initialValue: 'provider',
+        options: [
+          { value: 'consumer', label: 'Consumer' },
+          { value: 'provider', label: 'Provider' },
+        ],
+      }),
+    );
+  } else if (projectType === 'zephyr') {
+    framework = null;
+
     roleType = checkCancel<RoleType>(
       await select({
         message: 'Please select the role of project you want to create:',
@@ -278,11 +331,15 @@ async function forgeTemplate({
   let commonTemplateDir = '';
   if (projectType === 'lib') {
     commonTemplateDir = 'templates/lib-common/';
-  } else {
+  } else if (projectType === 'app') {
     commonTemplateDir = `templates/${framework}-common/`;
   }
+  // Zephyr templates are self-contained without common templates
 
-  await renderTemplate(commonTemplateDir);
+  // Only render common templates if they exist and are applicable
+  if (commonTemplateDir) {
+    await renderTemplate(commonTemplateDir);
+  }
   await renderTemplate(templateDir);
 }
 
@@ -349,11 +406,13 @@ export async function create({
       options: [
         { value: 'app', label: 'Application' },
         { value: 'lib', label: 'Lib' },
+        { value: 'zephyr', label: 'Zephyr Powered' },
       ],
     }),
   );
 
   const mfVersion = __VERSION__;
+
   await forgeTemplate({
     projectType,
     argv,
diff --git a/packages/create-module-federation/src/index.ts b/packages/create-module-federation/src/index.ts
index e934916c4b3..c16fadcb968 100644
--- a/packages/create-module-federation/src/index.ts
+++ b/packages/create-module-federation/src/index.ts
@@ -7,12 +7,21 @@ interface Template {
 }
 
 export const TEMPLATES = [
+  // Standard templates
   'provider-modern',
   'consumer-modern',
   'provider-rsbuild',
   'consumer-rsbuild',
   'rslib',
   'rslib-storybook',
+
+  // Zephyr integration templates
+  'zephyr-webpack-provider',
+  'zephyr-webpack-consumer',
+  'zephyr-rspack-provider',
+  'zephyr-rspack-consumer',
+  'zephyr-vite-provider',
+  'zephyr-vite-consumer',
 ];
 
 create({
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md b/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
new file mode 100644
index 00000000000..e28641fa623
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
@@ -0,0 +1,33 @@
+# Zephyr with Rspack Consumer Example
+
+This example demonstrates how to use Zephyr with Rspack to consume federated modules.
+
+## Features
+
+- Module Federation with Zephyr integration
+- React component consumption from remote provider
+- Rspack bundler configuration
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+## How It Works
+
+The example uses the `withZephyr` plugin from `zephyr-rspack-plugin` to enhance the Rspack configuration:
+
+```js
+const { withZephyr } = require('zephyr-rspack-plugin');
+
+module.exports = withZephyr()({
+  // ...rspack config with remotes
+});
+```
+
+This integration enables improved module federation consumption capabilities with the performance benefits of Rspack and Zephyr platform services.
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..6da55abb8de
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars
@@ -0,0 +1,15 @@
+import { ModuleFederationPluginOptions } from "@rspack/core";
+
+const moduleFederationConfig: ModuleFederationPluginOptions = {
+  name: '{{mfName}}',
+  filename: 'remoteEntry.js',
+  remotes: {
+    'provider': '{{mfName}}_provider@http://localhost:3002/remoteEntry.js',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+};
+
+export default moduleFederationConfig;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars b/packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars
new file mode 100644
index 00000000000..b8fa7543b6b
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars
@@ -0,0 +1,24 @@
+{
+  "name": "{{mfName}}-consumer",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rspack build",
+    "dev": "rspack serve",
+    "start": "rspack serve"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^1.0.2",
+    "@rspack/core": "^1.0.2",
+    "@rspack/dev-server": "^1.0.2",
+    "@module-federation/rspack-plugin": "latest",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "html-webpack-plugin": "^5.6.0",
+    "typescript": "^5.7.2",
+    "zephyr-rspack-plugin": "latest"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html b/packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html
new file mode 100644
index 00000000000..7d82ea321ed
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zephyr Rspack Consumer - {{mfName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts b/packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts
new file mode 100644
index 00000000000..6663ad6d2e4
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts
@@ -0,0 +1,51 @@
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { withZephyr } from 'zephyr-rspack-plugin';
+import moduleFederationConfig from './module-federation.config';
+import { container, ProgressPlugin } from '@rspack/core';
+
+const config = {
+  entry: './src/index.ts',
+  mode: 'development',
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    port: 3003,
+  },
+  output: {
+    publicPath: 'auto',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new container.ModuleFederationPlugin(moduleFederationConfig),
+    new ProgressPlugin(),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+};
+
+export default withZephyr()(config);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx
new file mode 100644
index 00000000000..b120ee8242d
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx
@@ -0,0 +1,18 @@
+import React, { lazy, Suspense } from 'react';
+
+// Import federated component
+const RemoteCard = lazy(() => import('provider/Card'));
+
+const App: React.FC = () => (
+  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
+    <h1>Zephyr Rspack Consumer</h1>
+    <p>This application consumes a federated component:</p>
+    <div style={{ marginTop: '1rem' }}>
+      <Suspense fallback={<div>Loading Card from Provider...</div>}>
+        <RemoteCard />
+      </Suspense>
+    </div>
+  </div>
+);
+
+export default App;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx
new file mode 100644
index 00000000000..cda8b95ec24
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) throw new Error('Failed to find the root element');
+const root = createRoot(rootElement);
+root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts
new file mode 100644
index 00000000000..b93c7a0268a
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts
@@ -0,0 +1 @@
+import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json b/packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json
new file mode 100644
index 00000000000..9221337cd8f
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/README.md b/packages/create-module-federation/templates/zephyr-rspack-provider/README.md
new file mode 100644
index 00000000000..2b78e0e65c9
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/README.md
@@ -0,0 +1,33 @@
+# Zephyr with Rspack Provider Example
+
+This example demonstrates how to use Zephyr with Rspack to create a federated module provider.
+
+## Features
+
+- Module Federation with Zephyr integration
+- React component exposed for federation
+- Rspack bundler configuration
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+## How It Works
+
+The example uses the `withZephyr` plugin from `zephyr-rspack-plugin` to enhance the Rspack configuration:
+
+```js
+const { withZephyr } = require('zephyr-rspack-plugin');
+
+module.exports = withZephyr()({
+  // ...rspack config
+});
+```
+
+This integration enables improved module federation capabilities with the performance benefits of Rspack and Zephyr platform services.
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..6968dcf4585
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars
@@ -0,0 +1,15 @@
+import { ModuleFederationPluginOptions } from "@rspack/core";
+
+const moduleFederationConfig: ModuleFederationPluginOptions = {
+  name: '{{mfName}}',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Card': './src/Card.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+};
+
+export default moduleFederationConfig;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars b/packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars
new file mode 100644
index 00000000000..6091272ceed
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars
@@ -0,0 +1,22 @@
+{
+  "name": "{{mfName}}-provider",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rspack build",
+    "dev": "rspack serve",
+    "start": "rspack serve"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rspack/core": "^1.0.2",
+    "@rspack/dev-server": "^1.0.2",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "html-webpack-plugin": "^5.6.0",
+    "typescript": "^5.7.2",
+    "zephyr-rspack-plugin": "latest"
+  }
+}
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html b/packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html
new file mode 100644
index 00000000000..d902218b01e
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zephyr Rspack Provider - {{mfName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts b/packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts
new file mode 100644
index 00000000000..96335ee0618
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts
@@ -0,0 +1,51 @@
+import { container, ProgressPlugin } from '@rspack/core';
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { withZephyr } from 'zephyr-rspack-plugin';
+import moduleFederationConfig from './module-federation.config';
+
+const config = {
+  entry: './src/index.ts',
+  mode: 'development',
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    port: 3002,
+  },
+  output: {
+    publicPath: 'auto',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new container.ModuleFederationPlugin(moduleFederationConfig),
+    new ProgressPlugin(),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+};
+
+export default withZephyr()(config);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx b/packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx
new file mode 100644
index 00000000000..4b2899745ed
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Card from './Card';
+
+const App: React.FC = () => (
+  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
+    <h1>Zephyr Rspack Provider</h1>
+    <p>This component is exposed via Module Federation and Zephyr:</p>
+    <div style={{ marginTop: '1rem' }}>
+      <Card />
+    </div>
+  </div>
+);
+
+export default App;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx b/packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx
new file mode 100644
index 00000000000..0bda53b4238
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface CardProps {
+  title?: string;
+  description?: string;
+}
+
+const Card: React.FC<CardProps> = ({
+  title = 'Zephyr Federated Card',
+  description = 'This card component is federated through Module Federation with Zephyr and Rspack.',
+}) => (
+  <div
+    style={{
+      border: '1px solid #ddd',
+      borderRadius: '8px',
+      padding: '16px',
+      maxWidth: '300px',
+      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+    }}
+  >
+    <h3 style={{ margin: '0 0 10px 0' }}>{title}</h3>
+    <p style={{ margin: '0' }}>{description}</p>
+  </div>
+);
+
+export default Card;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx
new file mode 100644
index 00000000000..cda8b95ec24
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) throw new Error('Failed to find the root element');
+const root = createRoot(rootElement);
+root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts b/packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts
new file mode 100644
index 00000000000..b93c7a0268a
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts
@@ -0,0 +1 @@
+import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json b/packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json
new file mode 100644
index 00000000000..9221337cd8f
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/README.md b/packages/create-module-federation/templates/zephyr-vite-consumer/README.md
new file mode 100644
index 00000000000..9dca2d5dcac
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/README.md
@@ -0,0 +1,45 @@
+# Zephyr with Vite Consumer Example
+
+This example demonstrates how to use Zephyr with Vite to consume federated modules.
+
+## Features
+
+- Module Federation with Zephyr integration
+- React component consumption from remote provider
+- Vite configuration with native Module Federation support via vite-plugin-zephyr
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+## How It Works
+
+The example uses the `withZephyr` function from `vite-plugin-zephyr` to enable Module Federation in Vite:
+
+```js
+import { withZephyr } from 'vite-plugin-zephyr';
+
+const mfConfig = {
+  name: 'consumer',
+  remotes: {
+    'provider': {
+      name: 'provider',
+      entry: 'http://localhost:3004/remoteEntry.js',
+    }
+  },
+  // Module Federation configuration
+};
+
+export default defineConfig({
+  plugins: [react(), withZephyr({ mfConfig })],
+  // ...vite config
+});
+```
+
+This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/index.html b/packages/create-module-federation/templates/zephyr-vite-consumer/index.html
new file mode 100644
index 00000000000..7d07aa2bb92
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zephyr Vite Consumer - {{ mfName }}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..37bff220978
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars
@@ -0,0 +1,19 @@
+const config = {
+  name: '{{mfName}}',
+  remotes: {
+    'provider': {
+      name: '{{mfName}}_provider',
+      entry: 'http://localhost:3004/remoteEntry.js',
+    }
+  },
+  shared: {
+    react: {
+      singleton: true,
+    },
+    'react-dom': {
+      singleton: true,
+    },
+  },
+};
+
+export default config;
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars b/packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars
new file mode 100644
index 00000000000..57fb87c865c
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars
@@ -0,0 +1,31 @@
+{
+  "name": "{{ mfName }}-consumer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "DEBUG=zephyr:log,zephyr:error vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@module-federation/runtime": "0.6.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.5",
+    "vite-plugin-zephyr": "latest"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.jsx b/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.jsx
new file mode 100644
index 00000000000..e6d71401a44
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.jsx
@@ -0,0 +1,49 @@
+import React, { lazy, Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+
+// Import remote component
+const RemoteFooter = lazy(() => import('provider/Footer'));
+
+const App = () => (
+  <div
+    style={{
+      fontFamily: 'system-ui, sans-serif',
+      padding: '1rem',
+      maxWidth: '900px',
+      margin: '0 auto',
+    }}
+  >
+    <h1>Zephyr Vite Consumer - {{ mfName }}</h1>
+    <p>
+      This application consumes a federated Footer component from the provider
+      application.
+    </p>
+
+    <div
+      style={{
+        padding: '20px',
+        backgroundColor: '#fff',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+        marginBottom: '20px',
+      }}
+    >
+      <h2>Main Content</h2>
+      <p>
+        This is the main content of the consumer application. The footer below
+        is imported from the provider application via Module Federation with
+        Zephyr.
+      </p>
+    </div>
+
+    <Suspense fallback={<div>Loading Footer from Provider...</div>}>
+      <RemoteFooter />
+    </Suspense>
+  </div>
+);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json b/packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json
new file mode 100644
index 00000000000..6c2731003cc
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts b/packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts
new file mode 100644
index 00000000000..35ad655fcb7
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig, type UserConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { withZephyr } from 'vite-plugin-zephyr';
+import mfConfig from './module-federation.config';
+
+export default defineConfig({
+  plugins: [react(), withZephyr({ mfConfig })],
+  server: {
+    port: 3005,
+  },
+  build: {
+    target: 'chrome89',
+  },
+});
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/README.md b/packages/create-module-federation/templates/zephyr-vite-provider/README.md
new file mode 100644
index 00000000000..597ddadee65
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/README.md
@@ -0,0 +1,39 @@
+# Zephyr with Vite Example
+
+This example demonstrates how to use Zephyr with Vite to enable federated modules with enhanced capabilities.
+
+## Features
+
+- Module Federation with Zephyr integration
+- React component exposed for federation
+- Vite configuration with native Module Federation support via vite-plugin-zephyr
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+## How It Works
+
+The example uses the `withZephyr` function from `vite-plugin-zephyr` to enable Module Federation in Vite:
+
+```js
+import { withZephyr } from 'vite-plugin-zephyr';
+
+const mfConfig = {
+  name: 'my-app',
+  // Module Federation configuration
+};
+
+export default defineConfig({
+  plugins: [react(), withZephyr({ mfConfig })],
+  // ...vite config
+});
+```
+
+This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/index.html b/packages/create-module-federation/templates/zephyr-vite-provider/index.html
new file mode 100644
index 00000000000..620dd4b246b
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zephyr Vite Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars
new file mode 100644
index 00000000000..cbf30c0bd0e
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars
@@ -0,0 +1,17 @@
+const config = {
+  name: '{{mfName}}',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Footer': './src/Footer.tsx',
+  },
+  shared: {
+    react: {
+      singleton: true,
+    },
+    'react-dom': {
+      singleton: true,
+    },
+  },
+};
+
+export default config;
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars b/packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars
new file mode 100644
index 00000000000..04a4e0020c0
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars
@@ -0,0 +1,31 @@
+{
+  "name": "{{ mfName }}-provider",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "DEBUG=zephyr:log,zephyr:error vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@module-federation/runtime": "0.6.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.5",
+    "vite-plugin-zephyr": "latest"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx b/packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx
new file mode 100644
index 00000000000..6171bb8cc73
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface FooterProps {
+  companyName?: string;
+}
+
+const Footer: React.FC<FooterProps> = ({ companyName = '{{ mfName }}' }) => (
+  <footer
+    style={{
+      backgroundColor: '#f5f5f5',
+      padding: '20px',
+      borderTop: '1px solid #ddd',
+      marginTop: '40px',
+      textAlign: 'center',
+      borderRadius: '4px',
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        gap: '20px',
+        marginBottom: '10px',
+      }}
+    >
+      <a href="#" style={{ color: '#333', textDecoration: 'none' }}>
+        Terms
+      </a>
+      <a href="#" style={{ color: '#333', textDecoration: 'none' }}>
+        Privacy
+      </a>
+      <a href="#" style={{ color: '#333', textDecoration: 'none' }}>
+        Contact
+      </a>
+    </div>
+    <p style={{ margin: '0', color: '#666', fontSize: '14px' }}>
+      © {new Date().getFullYear()} {companyName} - Federated with Zephyr and
+      Vite
+    </p>
+  </footer>
+);
+
+export default Footer;
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx b/packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx
new file mode 100644
index 00000000000..499395206d6
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Footer from './Footer';
+
+const App = () => (
+  <div
+    style={{
+      fontFamily: 'system-ui, sans-serif',
+      padding: '1rem',
+      maxWidth: '900px',
+      margin: '0 auto',
+    }}
+  >
+    <h1>Zephyr Vite Example</h1>
+    <p>
+      This application demonstrates a federated Footer component using Module
+      Federation with Zephyr and Vite
+    </p>
+
+    <div
+      style={{
+        padding: '20px',
+        backgroundColor: '#fff',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+        marginBottom: '20px',
+      }}
+    >
+      <h2>Main Content</h2>
+      <p>
+        This is the main content of the application. The footer below is a
+        federated component that could be shared across multiple applications.
+      </p>
+    </div>
+
+    <Footer />
+  </div>
+);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json b/packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json
new file mode 100644
index 00000000000..6c2731003cc
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts b/packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts
new file mode 100644
index 00000000000..5f8eb83a0c7
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig, type UserConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { withZephyr } from 'vite-plugin-zephyr';
+import mfConfig from './module-federation.config';
+
+export default defineConfig({
+  plugins: [react(), withZephyr({ mfConfig })],
+  experimental: {
+    renderBuiltUrl() {
+      return { relative: true };
+    },
+  },
+  server: {
+    port: 3004,
+  },
+  build: {
+    target: 'chrome89',
+  },
+});
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md b/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
new file mode 100644
index 00000000000..0cee57888ea
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
@@ -0,0 +1,42 @@
+# Zephyr with Webpack Consumer Example
+
+This example demonstrates how to use Zephyr with Webpack to consume federated modules.
+
+## Features
+
+- Module Federation with Zephyr integration
+- React component consumption from remote provider
+- Webpack bundler configuration
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+## How It Works
+
+The example uses the `withZephyr` plugin from `zephyr-webpack-plugin` to enhance the Webpack configuration:
+
+```js
+const { withZephyr } = require('zephyr-webpack-plugin');
+
+module.exports = withZephyr()({
+  // ...webpack config
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'consumer',
+      remotes: {
+        'provider': 'provider@http://localhost:3000/remoteEntry.js',
+      },
+      // ...
+    }),
+  ],
+});
+```
+
+This integration allows for improved module federation capabilities with Zephyr platform services.
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars b/packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars
new file mode 100644
index 00000000000..f73214dbb40
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars
@@ -0,0 +1,27 @@
+{
+  "name": "{{ mfName }}-zephyr-webpack-consumer",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack serve --mode development",
+    "start": "webpack serve --mode development"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "babel-loader": "^9.1.3",
+    "html-webpack-plugin": "^5.6.0",
+    "typescript": "^5.5.2",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "zephyr-webpack-plugin": "latest"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html b/packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html
new file mode 100644
index 00000000000..248f19bb3ec
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zephyr Webpack Consumer - {{ mfName }}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.jsx b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.jsx
new file mode 100644
index 00000000000..dbf8acd8075
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.jsx
@@ -0,0 +1,21 @@
+import React, { lazy, Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+
+// Import federated component
+const RemoteButton = lazy(() => import('provider/Button'));
+
+const App = () => (
+  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
+    <h1>Zephyr Webpack Consumer - {{ mfName }}</h1>
+    <p>This application consumes a federated component:</p>
+    <div style={{ marginTop: '1rem' }}>
+      <Suspense fallback={<div>Loading Button from Provider...</div>}>
+        <RemoteButton />
+      </Suspense>
+    </div>
+  </div>
+);
+
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.js b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.js
new file mode 100644
index 00000000000..b93c7a0268a
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.js
@@ -0,0 +1 @@
+import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json b/packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json
new file mode 100644
index 00000000000..6c2731003cc
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts b/packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts
new file mode 100644
index 00000000000..a4b097c3c9a
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts
@@ -0,0 +1,51 @@
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { Configuration } from 'webpack';
+import { container } from 'webpack';
+import { withZephyr } from 'zephyr-webpack-plugin';
+
+const { ModuleFederationPlugin } = container;
+
+const config: Configuration = {
+  entry: './src/index.ts',
+  mode: 'development',
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    port: 3001,
+  },
+  output: {
+    publicPath: 'auto',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          presets: ['@babel/preset-react', '@babel/preset-typescript'],
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: '{{ mfName }}',
+      filename: 'remoteEntry.js',
+      remotes: {
+        provider: 'provider@http://localhost:3000/remoteEntry.js',
+      },
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+};
+
+export default withZephyr()(config);
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/README.md b/packages/create-module-federation/templates/zephyr-webpack-provider/README.md
new file mode 100644
index 00000000000..1834429bd9f
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/README.md
@@ -0,0 +1,33 @@
+# Zephyr with Webpack Provider Example
+
+This example demonstrates how to use Zephyr with Webpack to create a federated module provider.
+
+## Features
+
+- Module Federation with Zephyr integration
+- React component exposed for federation
+- Webpack bundler configuration
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+## How It Works
+
+The example uses the `withZephyr` plugin from `zephyr-webpack-plugin` to enhance the Webpack configuration:
+
+```js
+const { withZephyr } = require('zephyr-webpack-plugin');
+
+module.exports = withZephyr()({
+  // ...webpack config
+});
+```
+
+This integration allows for improved module federation capabilities with Zephyr platform services.
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars b/packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars
new file mode 100644
index 00000000000..f031563c8db
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars
@@ -0,0 +1,27 @@
+{
+  "name": "{{ mfName }}-zephyr-webpack-provider",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack serve --mode development",
+    "start": "webpack serve --mode development"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "~18.3.1",
+    "babel-loader": "^9.1.3",
+    "html-webpack-plugin": "^5.6.0",
+    "typescript": "^5.5.2",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "zephyr-webpack-plugin": "latest"
+  }
+}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html b/packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html
new file mode 100644
index 00000000000..324bc71d348
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zephyr Webpack Example - {{ mfName }}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx b/packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx
new file mode 100644
index 00000000000..596b19d0061
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface ButtonProps {
+  label?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  label = 'Zephyr Federated Button',
+}) => (
+  <button
+    style={{
+      padding: '12px 20px',
+      backgroundColor: '#0070f3',
+      color: 'white',
+      border: 'none',
+      borderRadius: '4px',
+    }}
+  >
+    {label}
+  </button>
+);
+
+export default Button;
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
new file mode 100644
index 00000000000..d38deea7964
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Button from './Button';
+
+const App: React.FC = () => (
+  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
+    <h1>Zephyr Webpack Provider - {{ mfName }}</h1>
+    <p>This component is exposed via Module Federation and Zephyr:</p>
+    <div style={{ marginTop: '1rem' }}>
+      <Button />
+    </div>
+  </div>
+);
+
+const rootElement = document.getElementById('root');
+if (!rootElement) throw new Error('Root element not found');
+const root = createRoot(rootElement);
+root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.ts b/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.ts
new file mode 100644
index 00000000000..b93c7a0268a
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.ts
@@ -0,0 +1 @@
+import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json b/packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json
new file mode 100644
index 00000000000..6c2731003cc
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts b/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts
new file mode 100644
index 00000000000..a22c7b8690b
--- /dev/null
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts
@@ -0,0 +1,51 @@
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { Configuration } from 'webpack';
+import { container } from 'webpack';
+import { withZephyr } from 'zephyr-webpack-plugin';
+
+const { ModuleFederationPlugin } = container;
+
+const config: Configuration = {
+  entry: './src/index.ts',
+  mode: 'development',
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    port: 3001,
+  },
+  output: {
+    publicPath: 'auto',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          presets: ['@babel/preset-react', '@babel/preset-typescript'],
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: '{{ mfName }}',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Button': './src/Button.tsx',
+      },
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+};
+
+export default withZephyr()(config);

From 1562b72d6923fbae1c6c299f85d7895ee66790f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Wed, 5 Mar 2025 19:57:20 +0100
Subject: [PATCH 2/6] chore: move files to use ts

---
 .../zephyr-vite-consumer/src/{main.jsx => main.tsx}         | 4 ++--
 .../src/{bootstrap.jsx => bootstrap.tsx}                    | 4 ++--
 .../zephyr-webpack-consumer/src/{index.js => index.tsx}     | 0
 .../templates/zephyr-webpack-provider/src/bootstrap.tsx     | 2 +-
 .../zephyr-webpack-provider/src/{index.ts => index.tsx}     | 0
 .../templates/zephyr-webpack-provider/webpack.config.ts     | 6 ------
 6 files changed, 5 insertions(+), 11 deletions(-)
 rename packages/create-module-federation/templates/zephyr-vite-consumer/src/{main.jsx => main.tsx} (90%)
 rename packages/create-module-federation/templates/zephyr-webpack-consumer/src/{bootstrap.jsx => bootstrap.tsx} (84%)
 rename packages/create-module-federation/templates/zephyr-webpack-consumer/src/{index.js => index.tsx} (100%)
 rename packages/create-module-federation/templates/zephyr-webpack-provider/src/{index.ts => index.tsx} (100%)

diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.jsx b/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.tsx
similarity index 90%
rename from packages/create-module-federation/templates/zephyr-vite-consumer/src/main.jsx
rename to packages/create-module-federation/templates/zephyr-vite-consumer/src/main.tsx
index e6d71401a44..0af48b7024f 100644
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.jsx
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.tsx
@@ -13,7 +13,7 @@ const App = () => (
       margin: '0 auto',
     }}
   >
-    <h1>Zephyr Vite Consumer - {{ mfName }}</h1>
+    <h1>Zephyr Vite Consumer</h1>
     <p>
       This application consumes a federated Footer component from the provider
       application.
@@ -42,7 +42,7 @@ const App = () => (
   </div>
 );
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.jsx b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.tsx
similarity index 84%
rename from packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.jsx
rename to packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.tsx
index dbf8acd8075..4bae34b144d 100644
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.jsx
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.tsx
@@ -6,7 +6,7 @@ const RemoteButton = lazy(() => import('provider/Button'));
 
 const App = () => (
   <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
-    <h1>Zephyr Webpack Consumer - {{ mfName }}</h1>
+    <h1>Zephyr Webpack Consumer</h1>
     <p>This application consumes a federated component:</p>
     <div style={{ marginTop: '1rem' }}>
       <Suspense fallback={<div>Loading Button from Provider...</div>}>
@@ -16,6 +16,6 @@ const App = () => (
   </div>
 );
 
-const rootElement = document.getElementById('root');
+const rootElement = document.getElementById('root')!;
 const root = createRoot(rootElement);
 root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.js b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.tsx
similarity index 100%
rename from packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.js
rename to packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.tsx
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
index d38deea7964..62fc26c0269 100644
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
@@ -4,7 +4,7 @@ import Button from './Button';
 
 const App: React.FC = () => (
   <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
-    <h1>Zephyr Webpack Provider - {{ mfName }}</h1>
+    <h1>Zephyr Webpack Provider</h1>
     <p>This component is exposed via Module Federation and Zephyr:</p>
     <div style={{ marginTop: '1rem' }}>
       <Button />
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.ts b/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.tsx
similarity index 100%
rename from packages/create-module-federation/templates/zephyr-webpack-provider/src/index.ts
rename to packages/create-module-federation/templates/zephyr-webpack-provider/src/index.tsx
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts b/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts
index a22c7b8690b..d2e4a70a9d6 100644
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts
@@ -9,12 +9,6 @@ const { ModuleFederationPlugin } = container;
 const config: Configuration = {
   entry: './src/index.ts',
   mode: 'development',
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'dist'),
-    },
-    port: 3001,
-  },
   output: {
     publicPath: 'auto',
   },

From 0f63970141e753123faaef59f40b040c848a0513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Wed, 5 Mar 2025 20:00:03 +0100
Subject: [PATCH 3/6] chore: remove nulls

---
 packages/create-module-federation/src/create.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/create-module-federation/src/create.ts b/packages/create-module-federation/src/create.ts
index d6b6c84ec10..5c04b9c3294 100644
--- a/packages/create-module-federation/src/create.ts
+++ b/packages/create-module-federation/src/create.ts
@@ -34,7 +34,7 @@ type Argv = {
 
 type ProjectType = 'lib' | 'app' | 'zephyr';
 type RoleType = 'consumer' | 'provider';
-type AppTemplateName = 'modern' | 'rsbuild';
+type AppTemplateName = 'modern' | 'rsbuild' | 'zephyr';
 type ZephyrTemplateName = 'webpack' | 'rspack' | 'vite';
 type LibTemplateName = 'rslib';
 type ProviderInfo = {
@@ -209,7 +209,7 @@ function getTemplateName(
   }: {
     projectType: ProjectType;
     roleType: RoleType;
-    framework: AppTemplateName | null;
+    framework: AppTemplateName;
   },
   args: Argv,
 ) {
@@ -217,7 +217,7 @@ function getTemplateName(
     return getAppTemplateName(
       {
         roleType,
-        framework: framework as AppTemplateName,
+        framework,
       },
       args,
     );
@@ -247,7 +247,7 @@ async function forgeTemplate({
   templateParameters: Record<string, string>;
   distFolder: string;
 }) {
-  let framework: AppTemplateName | null = 'modern';
+  let framework: AppTemplateName = 'modern';
   let roleType: RoleType = 'provider';
 
   if (projectType === 'app') {
@@ -272,7 +272,7 @@ async function forgeTemplate({
       }),
     );
   } else if (projectType === 'zephyr') {
-    framework = null;
+    framework = 'zephyr';
 
     roleType = checkCancel<RoleType>(
       await select({

From 2f1852cd9dfe6b5b75316f8475c3b4de593faff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Wed, 5 Mar 2025 20:08:36 +0100
Subject: [PATCH 4/6] docs: format readmes

---
 .../templates/zephyr-rspack-consumer/README.md              | 2 +-
 .../templates/zephyr-rspack-provider/README.md              | 2 +-
 .../templates/zephyr-vite-consumer/README.md                | 6 +++---
 .../templates/zephyr-vite-provider/README.md                | 2 +-
 .../templates/zephyr-webpack-consumer/README.md             | 4 ++--
 .../templates/zephyr-webpack-provider/README.md             | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md b/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
index e28641fa623..b10fe81b93f 100644
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
+++ b/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
@@ -30,4 +30,4 @@ module.exports = withZephyr()({
 });
 ```
 
-This integration enables improved module federation consumption capabilities with the performance benefits of Rspack and Zephyr platform services.
\ No newline at end of file
+This integration enables improved module federation consumption capabilities with the performance benefits of Rspack and Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/README.md b/packages/create-module-federation/templates/zephyr-rspack-provider/README.md
index 2b78e0e65c9..01605a92c9a 100644
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/README.md
+++ b/packages/create-module-federation/templates/zephyr-rspack-provider/README.md
@@ -30,4 +30,4 @@ module.exports = withZephyr()({
 });
 ```
 
-This integration enables improved module federation capabilities with the performance benefits of Rspack and Zephyr platform services.
\ No newline at end of file
+This integration enables improved module federation capabilities with the performance benefits of Rspack and Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/README.md b/packages/create-module-federation/templates/zephyr-vite-consumer/README.md
index 9dca2d5dcac..95f4ebf3a4a 100644
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/README.md
+++ b/packages/create-module-federation/templates/zephyr-vite-consumer/README.md
@@ -28,10 +28,10 @@ import { withZephyr } from 'vite-plugin-zephyr';
 const mfConfig = {
   name: 'consumer',
   remotes: {
-    'provider': {
+    provider: {
       name: 'provider',
       entry: 'http://localhost:3004/remoteEntry.js',
-    }
+    },
   },
   // Module Federation configuration
 };
@@ -42,4 +42,4 @@ export default defineConfig({
 });
 ```
 
-This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
\ No newline at end of file
+This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/README.md b/packages/create-module-federation/templates/zephyr-vite-provider/README.md
index 597ddadee65..fd735bcdd88 100644
--- a/packages/create-module-federation/templates/zephyr-vite-provider/README.md
+++ b/packages/create-module-federation/templates/zephyr-vite-provider/README.md
@@ -36,4 +36,4 @@ export default defineConfig({
 });
 ```
 
-This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
\ No newline at end of file
+This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md b/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
index 0cee57888ea..1b9b4156265 100644
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
+++ b/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
@@ -31,7 +31,7 @@ module.exports = withZephyr()({
     new ModuleFederationPlugin({
       name: 'consumer',
       remotes: {
-        'provider': 'provider@http://localhost:3000/remoteEntry.js',
+        provider: 'provider@http://localhost:3000/remoteEntry.js',
       },
       // ...
     }),
@@ -39,4 +39,4 @@ module.exports = withZephyr()({
 });
 ```
 
-This integration allows for improved module federation capabilities with Zephyr platform services.
\ No newline at end of file
+This integration allows for improved module federation capabilities with Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/README.md b/packages/create-module-federation/templates/zephyr-webpack-provider/README.md
index 1834429bd9f..2c4cad1e7fe 100644
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/README.md
+++ b/packages/create-module-federation/templates/zephyr-webpack-provider/README.md
@@ -30,4 +30,4 @@ module.exports = withZephyr()({
 });
 ```
 
-This integration allows for improved module federation capabilities with Zephyr platform services.
\ No newline at end of file
+This integration allows for improved module federation capabilities with Zephyr platform services.

From eaf8b3961aac4eb60fc91b6b300489f950e29c71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Thu, 6 Mar 2025 11:18:12 +0100
Subject: [PATCH 5/6] feat: use zephyr cli inside other cli

---
 .../create-module-federation/src/create.ts    | 109 ++++++------------
 .../zephyr-rspack-consumer/README.md          |  33 ------
 .../module-federation.config.ts.handlebars    |  15 ---
 .../package.json.handlebars                   |  24 ----
 .../zephyr-rspack-consumer/public/index.html  |  11 --
 .../zephyr-rspack-consumer/rspack.config.ts   |  51 --------
 .../zephyr-rspack-consumer/src/App.tsx        |  18 ---
 .../zephyr-rspack-consumer/src/bootstrap.tsx  |   7 --
 .../zephyr-rspack-consumer/src/index.ts       |   1 -
 .../zephyr-rspack-consumer/tsconfig.json      |  26 -----
 .../zephyr-rspack-provider/README.md          |  33 ------
 .../module-federation.config.ts.handlebars    |  15 ---
 .../package.json.handlebars                   |  22 ----
 .../zephyr-rspack-provider/public/index.html  |  11 --
 .../zephyr-rspack-provider/rspack.config.ts   |  51 --------
 .../zephyr-rspack-provider/src/App.tsx        |  14 ---
 .../zephyr-rspack-provider/src/Card.tsx       |  26 -----
 .../zephyr-rspack-provider/src/bootstrap.tsx  |   7 --
 .../zephyr-rspack-provider/src/index.ts       |   1 -
 .../zephyr-rspack-provider/tsconfig.json      |  26 -----
 .../templates/zephyr-vite-consumer/README.md  |  45 --------
 .../templates/zephyr-vite-consumer/index.html |  12 --
 .../module-federation.config.ts.handlebars    |  19 ---
 .../package.json.handlebars                   |  31 -----
 .../zephyr-vite-consumer/src/main.tsx         |  49 --------
 .../zephyr-vite-consumer/tsconfig.json        |  22 ----
 .../zephyr-vite-consumer/vite.config.ts       |  14 ---
 .../templates/zephyr-vite-provider/README.md  |  39 -------
 .../templates/zephyr-vite-provider/index.html |  12 --
 .../module-federation.config.ts.handlebars    |  17 ---
 .../package.json.handlebars                   |  31 -----
 .../zephyr-vite-provider/src/Footer.tsx       |  43 -------
 .../zephyr-vite-provider/src/main.tsx         |  44 -------
 .../zephyr-vite-provider/tsconfig.json        |  22 ----
 .../zephyr-vite-provider/vite.config.ts       |  19 ---
 .../zephyr-webpack-consumer/README.md         |  42 -------
 .../package.json.handlebars                   |  27 -----
 .../zephyr-webpack-consumer/public/index.html |  11 --
 .../zephyr-webpack-consumer/src/bootstrap.tsx |  21 ----
 .../zephyr-webpack-consumer/src/index.tsx     |   1 -
 .../zephyr-webpack-consumer/tsconfig.json     |  22 ----
 .../zephyr-webpack-consumer/webpack.config.ts |  51 --------
 .../zephyr-webpack-provider/README.md         |  33 ------
 .../package.json.handlebars                   |  27 -----
 .../zephyr-webpack-provider/public/index.html |  11 --
 .../zephyr-webpack-provider/src/Button.tsx    |  23 ----
 .../zephyr-webpack-provider/src/bootstrap.tsx |  18 ---
 .../zephyr-webpack-provider/src/index.tsx     |   1 -
 .../zephyr-webpack-provider/tsconfig.json     |  22 ----
 .../zephyr-webpack-provider/webpack.config.ts |  45 --------
 50 files changed, 35 insertions(+), 1240 deletions(-)
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/README.md
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts
 delete mode 100644 packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/README.md
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/index.html
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/src/main.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/README.md
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/index.html
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json
 delete mode 100644 packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/README.md
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/src/index.tsx
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json
 delete mode 100644 packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts

diff --git a/packages/create-module-federation/src/create.ts b/packages/create-module-federation/src/create.ts
index 5976130bd78..13d5c2dd1d1 100644
--- a/packages/create-module-federation/src/create.ts
+++ b/packages/create-module-federation/src/create.ts
@@ -29,6 +29,7 @@ declare const __VERSION__: string;
 const enum ProjectType {
   app = 'app',
   lib = 'lib',
+  zephyr = 'zephyr',
   other = 'other',
 }
 
@@ -49,21 +50,18 @@ type Argv = {
 const OTHER_TYPE: {
   [typeName: string]: {
     label: string;
-    command: string;
+    packageName: string;
     hint?: string;
   };
 } = {
   zephyr: {
     label: 'zephyr',
-    command: 'npm create zephyr@latest',
-    hint: 'npm create zephyr@latest',
+    packageName: 'zephyr-apps@latest',
+    hint: 'create zephyr-apps@latest',
   },
 };
 
-type ProjectType = 'lib' | 'app' | 'zephyr';
-type RoleType = 'consumer' | 'provider';
-type AppTemplateName = 'modern' | 'rsbuild' | 'zephyr';
-type ZephyrTemplateName = 'webpack' | 'rspack' | 'vite';
+type AppTemplateName = 'modern' | 'rsbuild';
 type LibTemplateName = 'rslib';
 
 function upperFirst(str: string) {
@@ -84,14 +82,7 @@ function logHelpMessage(name: string, templates: string[]) {
      --override       override files in target directory
 
    Templates:
-
-     Standard Templates:
      ${templates.filter((t) => !t.startsWith('zephyr')).join(', ')}
-
-     Zephyr Integration Templates:
-     - Webpack: ${templates.filter((t) => t.startsWith('zephyr-webpack')).join(', ')}
-     - Rspack: ${templates.filter((t) => t.startsWith('zephyr-rspack')).join(', ')}
-     - Vite: ${templates.filter((t) => t.startsWith('zephyr-vite')).join(', ')}
 `);
 }
 
@@ -163,32 +154,6 @@ async function getAppTemplateName(
   return `${roleType}-${framework}-ts`;
 }
 
-async function getZephyrTemplateName(
-  {
-    roleType,
-  }: {
-    roleType: RoleType;
-  },
-  { template }: Argv,
-) {
-  if (template) {
-    return template;
-  }
-
-  const framework = checkCancel<ZephyrTemplateName>(
-    await select({
-      message: 'Select Zephyr integration',
-      options: [
-        { value: 'webpack', label: 'Webpack' },
-        { value: 'rspack', label: 'Rspack' },
-        { value: 'vite', label: 'Vite' },
-      ],
-    }),
-  );
-
-  return `zephyr-${framework}-${roleType}`;
-}
-
 async function getLibTemplateName({ template }: Argv) {
   if (template) {
     return `${template}-ts`;
@@ -247,13 +212,6 @@ function getTemplateName(
       },
       args,
     );
-  } else if (projectType === 'zephyr') {
-    return getZephyrTemplateName(
-      {
-        roleType,
-      },
-      args,
-    );
   }
   return getLibTemplateName(args);
 }
@@ -287,19 +245,6 @@ async function forgeTemplate({
       }),
     );
 
-    roleType = checkCancel<RoleType>(
-      await select({
-        message: 'Please select the role of project you want to create:',
-        initialValue: 'provider',
-        options: [
-          { value: 'consumer', label: 'Consumer' },
-          { value: 'provider', label: 'Provider' },
-        ],
-      }),
-    );
-  } else if (projectType === 'zephyr') {
-    framework = 'zephyr';
-
     roleType = checkCancel<RoleType>(
       await select({
         message: 'Please select the role of project you want to create:',
@@ -360,7 +305,6 @@ async function forgeTemplate({
   } else if (projectType === 'app') {
     commonTemplateDir = `templates/${framework}-common/`;
   }
-  // Zephyr templates are self-contained without common templates
 
   // Only render common templates if they exist and are applicable
   if (commonTemplateDir) {
@@ -418,6 +362,36 @@ export async function create({
   const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
   const mfVersion = __VERSION__;
 
+  const projectType = checkCancel<ProjectType>(
+    await select({
+      message: 'Please select the type of project you want to create:',
+      options: [
+        { value: 'app', label: 'Application' },
+        { value: 'lib', label: 'Lib' },
+        {
+          value: 'zephyr',
+          label: 'Zephyr Powered (Learn more at https://zephyr-cloud.io)',
+        },
+      ],
+    }),
+  );
+
+  // If Zephyr is selected, run the zephyr-apps command and exit
+  if (projectType === ProjectType.zephyr) {
+    const zephyrPackage = OTHER_TYPE['zephyr'].packageName;
+    const zephyrCommand = `${pkgManager} create ${zephyrPackage}`;
+    note(`Running: ${zephyrCommand}`, 'Launching Zephyr setup');
+
+    // Execute the Zephyr command based on the user's package manager
+    spawnSync(pkgManager, ['create', zephyrPackage], {
+      stdio: 'inherit',
+      shell: true,
+    });
+
+    outro('Done.');
+    return;
+  }
+
   const mfName =
     argv.name ||
     checkCancel<string>(
@@ -454,19 +428,6 @@ export async function create({
     }
   }
 
-  const projectType = checkCancel<ProjectType>(
-    await select({
-      message: 'Please select the type of project you want to create:',
-      options: [
-        { value: 'app', label: 'Application' },
-        { value: 'lib', label: 'Lib' },
-        { value: 'zephyr', label: 'Zephyr Powered' },
-      ],
-    }),
-  );
-
-  const mfVersion = __VERSION__;
-
   await forgeTemplate({
     projectType,
     argv,
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md b/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
deleted file mode 100644
index b10fe81b93f..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Zephyr with Rspack Consumer Example
-
-This example demonstrates how to use Zephyr with Rspack to consume federated modules.
-
-## Features
-
-- Module Federation with Zephyr integration
-- React component consumption from remote provider
-- Rspack bundler configuration
-
-## Getting Started
-
-```bash
-# Install dependencies
-npm install
-
-# Start the development server
-npm run dev
-```
-
-## How It Works
-
-The example uses the `withZephyr` plugin from `zephyr-rspack-plugin` to enhance the Rspack configuration:
-
-```js
-const { withZephyr } = require('zephyr-rspack-plugin');
-
-module.exports = withZephyr()({
-  // ...rspack config with remotes
-});
-```
-
-This integration enables improved module federation consumption capabilities with the performance benefits of Rspack and Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars
deleted file mode 100644
index 6da55abb8de..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/module-federation.config.ts.handlebars
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ModuleFederationPluginOptions } from "@rspack/core";
-
-const moduleFederationConfig: ModuleFederationPluginOptions = {
-  name: '{{mfName}}',
-  filename: 'remoteEntry.js',
-  remotes: {
-    'provider': '{{mfName}}_provider@http://localhost:3002/remoteEntry.js',
-  },
-  shared: {
-    react: { singleton: true },
-    'react-dom': { singleton: true },
-  },
-};
-
-export default moduleFederationConfig;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars b/packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars
deleted file mode 100644
index b8fa7543b6b..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/package.json.handlebars
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "{{mfName}}-consumer",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "rspack build",
-    "dev": "rspack serve",
-    "start": "rspack serve"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@rspack/cli": "^1.0.2",
-    "@rspack/core": "^1.0.2",
-    "@rspack/dev-server": "^1.0.2",
-    "@module-federation/rspack-plugin": "latest",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "~18.3.1",
-    "html-webpack-plugin": "^5.6.0",
-    "typescript": "^5.7.2",
-    "zephyr-rspack-plugin": "latest"
-  }
-}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html b/packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html
deleted file mode 100644
index 7d82ea321ed..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/public/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Zephyr Rspack Consumer - {{mfName}}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts b/packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts
deleted file mode 100644
index 6663ad6d2e4..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/rspack.config.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import path from 'path';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { withZephyr } from 'zephyr-rspack-plugin';
-import moduleFederationConfig from './module-federation.config';
-import { container, ProgressPlugin } from '@rspack/core';
-
-const config = {
-  entry: './src/index.ts',
-  mode: 'development',
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'dist'),
-    },
-    port: 3003,
-  },
-  output: {
-    publicPath: 'auto',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx|ts|tsx)$/,
-        use: {
-          loader: 'builtin:swc-loader',
-          options: {
-            jsc: {
-              parser: {
-                syntax: 'typescript',
-                tsx: true,
-              },
-              transform: {
-                react: {
-                  runtime: 'automatic',
-                },
-              },
-            },
-          },
-        },
-      },
-    ],
-  },
-  plugins: [
-    new container.ModuleFederationPlugin(moduleFederationConfig),
-    new ProgressPlugin(),
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-    }),
-  ],
-};
-
-export default withZephyr()(config);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx
deleted file mode 100644
index b120ee8242d..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/App.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-
-// Import federated component
-const RemoteCard = lazy(() => import('provider/Card'));
-
-const App: React.FC = () => (
-  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
-    <h1>Zephyr Rspack Consumer</h1>
-    <p>This application consumes a federated component:</p>
-    <div style={{ marginTop: '1rem' }}>
-      <Suspense fallback={<div>Loading Card from Provider...</div>}>
-        <RemoteCard />
-      </Suspense>
-    </div>
-  </div>
-);
-
-export default App;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx
deleted file mode 100644
index cda8b95ec24..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/bootstrap.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-const rootElement = document.getElementById('root');
-if (!rootElement) throw new Error('Failed to find the root element');
-const root = createRoot(rootElement);
-root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts b/packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts
deleted file mode 100644
index b93c7a0268a..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json b/packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json
deleted file mode 100644
index 9221337cd8f..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-consumer/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["DOM", "ES2020"],
-    "jsx": "react-jsx",
-    "target": "ES2020",
-    "noEmit": true,
-    "skipLibCheck": true,
-    "useDefineForClassFields": true,
-
-    /* modules */
-    "module": "ESNext",
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
-
-    /* type checking */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "paths": {
-      "*": ["./@mf-types/*"]
-    }
-  },
-  "include": ["src"]
-}
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/README.md b/packages/create-module-federation/templates/zephyr-rspack-provider/README.md
deleted file mode 100644
index 01605a92c9a..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Zephyr with Rspack Provider Example
-
-This example demonstrates how to use Zephyr with Rspack to create a federated module provider.
-
-## Features
-
-- Module Federation with Zephyr integration
-- React component exposed for federation
-- Rspack bundler configuration
-
-## Getting Started
-
-```bash
-# Install dependencies
-npm install
-
-# Start the development server
-npm run dev
-```
-
-## How It Works
-
-The example uses the `withZephyr` plugin from `zephyr-rspack-plugin` to enhance the Rspack configuration:
-
-```js
-const { withZephyr } = require('zephyr-rspack-plugin');
-
-module.exports = withZephyr()({
-  // ...rspack config
-});
-```
-
-This integration enables improved module federation capabilities with the performance benefits of Rspack and Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars
deleted file mode 100644
index 6968dcf4585..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/module-federation.config.ts.handlebars
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ModuleFederationPluginOptions } from "@rspack/core";
-
-const moduleFederationConfig: ModuleFederationPluginOptions = {
-  name: '{{mfName}}',
-  filename: 'remoteEntry.js',
-  exposes: {
-    './Card': './src/Card.tsx',
-  },
-  shared: {
-    react: { singleton: true },
-    'react-dom': { singleton: true },
-  },
-};
-
-export default moduleFederationConfig;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars b/packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars
deleted file mode 100644
index 6091272ceed..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/package.json.handlebars
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "{{mfName}}-provider",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "rspack build",
-    "dev": "rspack serve",
-    "start": "rspack serve"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@rspack/core": "^1.0.2",
-    "@rspack/dev-server": "^1.0.2",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "~18.3.1",
-    "html-webpack-plugin": "^5.6.0",
-    "typescript": "^5.7.2",
-    "zephyr-rspack-plugin": "latest"
-  }
-}
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html b/packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html
deleted file mode 100644
index d902218b01e..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/public/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Zephyr Rspack Provider - {{mfName}}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts b/packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts
deleted file mode 100644
index 96335ee0618..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/rspack.config.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { container, ProgressPlugin } from '@rspack/core';
-import path from 'path';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { withZephyr } from 'zephyr-rspack-plugin';
-import moduleFederationConfig from './module-federation.config';
-
-const config = {
-  entry: './src/index.ts',
-  mode: 'development',
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'dist'),
-    },
-    port: 3002,
-  },
-  output: {
-    publicPath: 'auto',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx|ts|tsx)$/,
-        use: {
-          loader: 'builtin:swc-loader',
-          options: {
-            jsc: {
-              parser: {
-                syntax: 'typescript',
-                tsx: true,
-              },
-              transform: {
-                react: {
-                  runtime: 'automatic',
-                },
-              },
-            },
-          },
-        },
-      },
-    ],
-  },
-  plugins: [
-    new container.ModuleFederationPlugin(moduleFederationConfig),
-    new ProgressPlugin(),
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-    }),
-  ],
-};
-
-export default withZephyr()(config);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx b/packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx
deleted file mode 100644
index 4b2899745ed..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/src/App.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Card from './Card';
-
-const App: React.FC = () => (
-  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
-    <h1>Zephyr Rspack Provider</h1>
-    <p>This component is exposed via Module Federation and Zephyr:</p>
-    <div style={{ marginTop: '1rem' }}>
-      <Card />
-    </div>
-  </div>
-);
-
-export default App;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx b/packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx
deleted file mode 100644
index 0bda53b4238..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/src/Card.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-interface CardProps {
-  title?: string;
-  description?: string;
-}
-
-const Card: React.FC<CardProps> = ({
-  title = 'Zephyr Federated Card',
-  description = 'This card component is federated through Module Federation with Zephyr and Rspack.',
-}) => (
-  <div
-    style={{
-      border: '1px solid #ddd',
-      borderRadius: '8px',
-      padding: '16px',
-      maxWidth: '300px',
-      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
-    }}
-  >
-    <h3 style={{ margin: '0 0 10px 0' }}>{title}</h3>
-    <p style={{ margin: '0' }}>{description}</p>
-  </div>
-);
-
-export default Card;
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx
deleted file mode 100644
index cda8b95ec24..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/src/bootstrap.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-const rootElement = document.getElementById('root');
-if (!rootElement) throw new Error('Failed to find the root element');
-const root = createRoot(rootElement);
-root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts b/packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts
deleted file mode 100644
index b93c7a0268a..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json b/packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json
deleted file mode 100644
index 9221337cd8f..00000000000
--- a/packages/create-module-federation/templates/zephyr-rspack-provider/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["DOM", "ES2020"],
-    "jsx": "react-jsx",
-    "target": "ES2020",
-    "noEmit": true,
-    "skipLibCheck": true,
-    "useDefineForClassFields": true,
-
-    /* modules */
-    "module": "ESNext",
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
-
-    /* type checking */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "paths": {
-      "*": ["./@mf-types/*"]
-    }
-  },
-  "include": ["src"]
-}
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/README.md b/packages/create-module-federation/templates/zephyr-vite-consumer/README.md
deleted file mode 100644
index 95f4ebf3a4a..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/README.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Zephyr with Vite Consumer Example
-
-This example demonstrates how to use Zephyr with Vite to consume federated modules.
-
-## Features
-
-- Module Federation with Zephyr integration
-- React component consumption from remote provider
-- Vite configuration with native Module Federation support via vite-plugin-zephyr
-
-## Getting Started
-
-```bash
-# Install dependencies
-npm install
-
-# Start the development server
-npm run dev
-```
-
-## How It Works
-
-The example uses the `withZephyr` function from `vite-plugin-zephyr` to enable Module Federation in Vite:
-
-```js
-import { withZephyr } from 'vite-plugin-zephyr';
-
-const mfConfig = {
-  name: 'consumer',
-  remotes: {
-    provider: {
-      name: 'provider',
-      entry: 'http://localhost:3004/remoteEntry.js',
-    },
-  },
-  // Module Federation configuration
-};
-
-export default defineConfig({
-  plugins: [react(), withZephyr({ mfConfig })],
-  // ...vite config
-});
-```
-
-This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/index.html b/packages/create-module-federation/templates/zephyr-vite-consumer/index.html
deleted file mode 100644
index 7d07aa2bb92..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Zephyr Vite Consumer - {{ mfName }}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars
deleted file mode 100644
index 37bff220978..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/module-federation.config.ts.handlebars
+++ /dev/null
@@ -1,19 +0,0 @@
-const config = {
-  name: '{{mfName}}',
-  remotes: {
-    'provider': {
-      name: '{{mfName}}_provider',
-      entry: 'http://localhost:3004/remoteEntry.js',
-    }
-  },
-  shared: {
-    react: {
-      singleton: true,
-    },
-    'react-dom': {
-      singleton: true,
-    },
-  },
-};
-
-export default config;
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars b/packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars
deleted file mode 100644
index 57fb87c865c..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/package.json.handlebars
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "{{ mfName }}-consumer",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "DEBUG=zephyr:log,zephyr:error vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@module-federation/runtime": "0.6.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.5",
-    "vite-plugin-zephyr": "latest"
-  }
-}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.tsx b/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.tsx
deleted file mode 100644
index 0af48b7024f..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/src/main.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-import ReactDOM from 'react-dom/client';
-
-// Import remote component
-const RemoteFooter = lazy(() => import('provider/Footer'));
-
-const App = () => (
-  <div
-    style={{
-      fontFamily: 'system-ui, sans-serif',
-      padding: '1rem',
-      maxWidth: '900px',
-      margin: '0 auto',
-    }}
-  >
-    <h1>Zephyr Vite Consumer</h1>
-    <p>
-      This application consumes a federated Footer component from the provider
-      application.
-    </p>
-
-    <div
-      style={{
-        padding: '20px',
-        backgroundColor: '#fff',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
-        marginBottom: '20px',
-      }}
-    >
-      <h2>Main Content</h2>
-      <p>
-        This is the main content of the consumer application. The footer below
-        is imported from the provider application via Module Federation with
-        Zephyr.
-      </p>
-    </div>
-
-    <Suspense fallback={<div>Loading Footer from Provider...</div>}>
-      <RemoteFooter />
-    </Suspense>
-  </div>
-);
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json b/packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json
deleted file mode 100644
index 6c2731003cc..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
-  },
-  "include": ["src"]
-}
diff --git a/packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts b/packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts
deleted file mode 100644
index 35ad655fcb7..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-consumer/vite.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineConfig, type UserConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { withZephyr } from 'vite-plugin-zephyr';
-import mfConfig from './module-federation.config';
-
-export default defineConfig({
-  plugins: [react(), withZephyr({ mfConfig })],
-  server: {
-    port: 3005,
-  },
-  build: {
-    target: 'chrome89',
-  },
-});
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/README.md b/packages/create-module-federation/templates/zephyr-vite-provider/README.md
deleted file mode 100644
index fd735bcdd88..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/README.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Zephyr with Vite Example
-
-This example demonstrates how to use Zephyr with Vite to enable federated modules with enhanced capabilities.
-
-## Features
-
-- Module Federation with Zephyr integration
-- React component exposed for federation
-- Vite configuration with native Module Federation support via vite-plugin-zephyr
-
-## Getting Started
-
-```bash
-# Install dependencies
-npm install
-
-# Start the development server
-npm run dev
-```
-
-## How It Works
-
-The example uses the `withZephyr` function from `vite-plugin-zephyr` to enable Module Federation in Vite:
-
-```js
-import { withZephyr } from 'vite-plugin-zephyr';
-
-const mfConfig = {
-  name: 'my-app',
-  // Module Federation configuration
-};
-
-export default defineConfig({
-  plugins: [react(), withZephyr({ mfConfig })],
-  // ...vite config
-});
-```
-
-This integration provides improved module federation capabilities with the fast build times of Vite and the power of Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/index.html b/packages/create-module-federation/templates/zephyr-vite-provider/index.html
deleted file mode 100644
index 620dd4b246b..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Zephyr Vite Example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars b/packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars
deleted file mode 100644
index cbf30c0bd0e..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/module-federation.config.ts.handlebars
+++ /dev/null
@@ -1,17 +0,0 @@
-const config = {
-  name: '{{mfName}}',
-  filename: 'remoteEntry.js',
-  exposes: {
-    './Footer': './src/Footer.tsx',
-  },
-  shared: {
-    react: {
-      singleton: true,
-    },
-    'react-dom': {
-      singleton: true,
-    },
-  },
-};
-
-export default config;
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars b/packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars
deleted file mode 100644
index 04a4e0020c0..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/package.json.handlebars
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "{{ mfName }}-provider",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "DEBUG=zephyr:log,zephyr:error vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@module-federation/runtime": "0.6.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.5",
-    "vite-plugin-zephyr": "latest"
-  }
-}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx b/packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx
deleted file mode 100644
index 6171bb8cc73..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/src/Footer.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-
-interface FooterProps {
-  companyName?: string;
-}
-
-const Footer: React.FC<FooterProps> = ({ companyName = '{{ mfName }}' }) => (
-  <footer
-    style={{
-      backgroundColor: '#f5f5f5',
-      padding: '20px',
-      borderTop: '1px solid #ddd',
-      marginTop: '40px',
-      textAlign: 'center',
-      borderRadius: '4px',
-    }}
-  >
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        gap: '20px',
-        marginBottom: '10px',
-      }}
-    >
-      <a href="#" style={{ color: '#333', textDecoration: 'none' }}>
-        Terms
-      </a>
-      <a href="#" style={{ color: '#333', textDecoration: 'none' }}>
-        Privacy
-      </a>
-      <a href="#" style={{ color: '#333', textDecoration: 'none' }}>
-        Contact
-      </a>
-    </div>
-    <p style={{ margin: '0', color: '#666', fontSize: '14px' }}>
-      © {new Date().getFullYear()} {companyName} - Federated with Zephyr and
-      Vite
-    </p>
-  </footer>
-);
-
-export default Footer;
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx b/packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx
deleted file mode 100644
index 499395206d6..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/src/main.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import Footer from './Footer';
-
-const App = () => (
-  <div
-    style={{
-      fontFamily: 'system-ui, sans-serif',
-      padding: '1rem',
-      maxWidth: '900px',
-      margin: '0 auto',
-    }}
-  >
-    <h1>Zephyr Vite Example</h1>
-    <p>
-      This application demonstrates a federated Footer component using Module
-      Federation with Zephyr and Vite
-    </p>
-
-    <div
-      style={{
-        padding: '20px',
-        backgroundColor: '#fff',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
-        marginBottom: '20px',
-      }}
-    >
-      <h2>Main Content</h2>
-      <p>
-        This is the main content of the application. The footer below is a
-        federated component that could be shared across multiple applications.
-      </p>
-    </div>
-
-    <Footer />
-  </div>
-);
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json b/packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json
deleted file mode 100644
index 6c2731003cc..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
-  },
-  "include": ["src"]
-}
diff --git a/packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts b/packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts
deleted file mode 100644
index 5f8eb83a0c7..00000000000
--- a/packages/create-module-federation/templates/zephyr-vite-provider/vite.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig, type UserConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { withZephyr } from 'vite-plugin-zephyr';
-import mfConfig from './module-federation.config';
-
-export default defineConfig({
-  plugins: [react(), withZephyr({ mfConfig })],
-  experimental: {
-    renderBuiltUrl() {
-      return { relative: true };
-    },
-  },
-  server: {
-    port: 3004,
-  },
-  build: {
-    target: 'chrome89',
-  },
-});
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md b/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
deleted file mode 100644
index 1b9b4156265..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# Zephyr with Webpack Consumer Example
-
-This example demonstrates how to use Zephyr with Webpack to consume federated modules.
-
-## Features
-
-- Module Federation with Zephyr integration
-- React component consumption from remote provider
-- Webpack bundler configuration
-
-## Getting Started
-
-```bash
-# Install dependencies
-npm install
-
-# Start the development server
-npm run dev
-```
-
-## How It Works
-
-The example uses the `withZephyr` plugin from `zephyr-webpack-plugin` to enhance the Webpack configuration:
-
-```js
-const { withZephyr } = require('zephyr-webpack-plugin');
-
-module.exports = withZephyr()({
-  // ...webpack config
-  plugins: [
-    new ModuleFederationPlugin({
-      name: 'consumer',
-      remotes: {
-        provider: 'provider@http://localhost:3000/remoteEntry.js',
-      },
-      // ...
-    }),
-  ],
-});
-```
-
-This integration allows for improved module federation capabilities with Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars b/packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars
deleted file mode 100644
index f73214dbb40..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/package.json.handlebars
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "{{ mfName }}-zephyr-webpack-consumer",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack serve --mode development",
-    "start": "webpack serve --mode development"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "~18.3.1",
-    "babel-loader": "^9.1.3",
-    "html-webpack-plugin": "^5.6.0",
-    "typescript": "^5.5.2",
-    "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
-    "zephyr-webpack-plugin": "latest"
-  }
-}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html b/packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html
deleted file mode 100644
index 248f19bb3ec..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/public/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Zephyr Webpack Consumer - {{ mfName }}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.tsx
deleted file mode 100644
index 4bae34b144d..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/bootstrap.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-import { createRoot } from 'react-dom/client';
-
-// Import federated component
-const RemoteButton = lazy(() => import('provider/Button'));
-
-const App = () => (
-  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
-    <h1>Zephyr Webpack Consumer</h1>
-    <p>This application consumes a federated component:</p>
-    <div style={{ marginTop: '1rem' }}>
-      <Suspense fallback={<div>Loading Button from Provider...</div>}>
-        <RemoteButton />
-      </Suspense>
-    </div>
-  </div>
-);
-
-const rootElement = document.getElementById('root')!;
-const root = createRoot(rootElement);
-root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.tsx b/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.tsx
deleted file mode 100644
index b93c7a0268a..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/src/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json b/packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json
deleted file mode 100644
index 6c2731003cc..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
-  },
-  "include": ["src"]
-}
diff --git a/packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts b/packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts
deleted file mode 100644
index a4b097c3c9a..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-consumer/webpack.config.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import path from 'path';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { Configuration } from 'webpack';
-import { container } from 'webpack';
-import { withZephyr } from 'zephyr-webpack-plugin';
-
-const { ModuleFederationPlugin } = container;
-
-const config: Configuration = {
-  entry: './src/index.ts',
-  mode: 'development',
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'dist'),
-    },
-    port: 3001,
-  },
-  output: {
-    publicPath: 'auto',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: {
-          presets: ['@babel/preset-react', '@babel/preset-typescript'],
-        },
-      },
-    ],
-  },
-  plugins: [
-    new ModuleFederationPlugin({
-      name: '{{ mfName }}',
-      filename: 'remoteEntry.js',
-      remotes: {
-        provider: 'provider@http://localhost:3000/remoteEntry.js',
-      },
-      shared: {
-        react: { singleton: true },
-        'react-dom': { singleton: true },
-      },
-    }),
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-    }),
-  ],
-};
-
-export default withZephyr()(config);
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/README.md b/packages/create-module-federation/templates/zephyr-webpack-provider/README.md
deleted file mode 100644
index 2c4cad1e7fe..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Zephyr with Webpack Provider Example
-
-This example demonstrates how to use Zephyr with Webpack to create a federated module provider.
-
-## Features
-
-- Module Federation with Zephyr integration
-- React component exposed for federation
-- Webpack bundler configuration
-
-## Getting Started
-
-```bash
-# Install dependencies
-npm install
-
-# Start the development server
-npm run dev
-```
-
-## How It Works
-
-The example uses the `withZephyr` plugin from `zephyr-webpack-plugin` to enhance the Webpack configuration:
-
-```js
-const { withZephyr } = require('zephyr-webpack-plugin');
-
-module.exports = withZephyr()({
-  // ...webpack config
-});
-```
-
-This integration allows for improved module federation capabilities with Zephyr platform services.
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars b/packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars
deleted file mode 100644
index f031563c8db..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/package.json.handlebars
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "{{ mfName }}-zephyr-webpack-provider",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack serve --mode development",
-    "start": "webpack serve --mode development"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "~18.3.1",
-    "babel-loader": "^9.1.3",
-    "html-webpack-plugin": "^5.6.0",
-    "typescript": "^5.5.2",
-    "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
-    "zephyr-webpack-plugin": "latest"
-  }
-}
\ No newline at end of file
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html b/packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html
deleted file mode 100644
index 324bc71d348..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/public/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Zephyr Webpack Example - {{ mfName }}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx b/packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx
deleted file mode 100644
index 596b19d0061..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/src/Button.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-interface ButtonProps {
-  label?: string;
-}
-
-const Button: React.FC<ButtonProps> = ({
-  label = 'Zephyr Federated Button',
-}) => (
-  <button
-    style={{
-      padding: '12px 20px',
-      backgroundColor: '#0070f3',
-      color: 'white',
-      border: 'none',
-      borderRadius: '4px',
-    }}
-  >
-    {label}
-  </button>
-);
-
-export default Button;
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx b/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
deleted file mode 100644
index 62fc26c0269..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/src/bootstrap.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import Button from './Button';
-
-const App: React.FC = () => (
-  <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
-    <h1>Zephyr Webpack Provider</h1>
-    <p>This component is exposed via Module Federation and Zephyr:</p>
-    <div style={{ marginTop: '1rem' }}>
-      <Button />
-    </div>
-  </div>
-);
-
-const rootElement = document.getElementById('root');
-if (!rootElement) throw new Error('Root element not found');
-const root = createRoot(rootElement);
-root.render(<App />);
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.tsx b/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.tsx
deleted file mode 100644
index b93c7a0268a..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/src/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-import('./bootstrap');
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json b/packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json
deleted file mode 100644
index 6c2731003cc..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
-  },
-  "include": ["src"]
-}
diff --git a/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts b/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts
deleted file mode 100644
index d2e4a70a9d6..00000000000
--- a/packages/create-module-federation/templates/zephyr-webpack-provider/webpack.config.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import path from 'path';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { Configuration } from 'webpack';
-import { container } from 'webpack';
-import { withZephyr } from 'zephyr-webpack-plugin';
-
-const { ModuleFederationPlugin } = container;
-
-const config: Configuration = {
-  entry: './src/index.ts',
-  mode: 'development',
-  output: {
-    publicPath: 'auto',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: {
-          presets: ['@babel/preset-react', '@babel/preset-typescript'],
-        },
-      },
-    ],
-  },
-  plugins: [
-    new ModuleFederationPlugin({
-      name: '{{ mfName }}',
-      filename: 'remoteEntry.js',
-      exposes: {
-        './Button': './src/Button.tsx',
-      },
-      shared: {
-        react: { singleton: true },
-        'react-dom': { singleton: true },
-      },
-    }),
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-    }),
-  ],
-};
-
-export default withZephyr()(config);

From bb7f02a8d8343049d79d3087e6353ad43cf87e98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor?= <nestor@nstlopez.com>
Date: Thu, 6 Mar 2025 11:22:00 +0100
Subject: [PATCH 6/6] chore: cleanup

---
 .../create-module-federation/src/create.ts    | 27 -------------------
 .../create-module-federation/src/index.ts     |  4 ---
 2 files changed, 31 deletions(-)

diff --git a/packages/create-module-federation/src/create.ts b/packages/create-module-federation/src/create.ts
index 13d5c2dd1d1..25e5cac9d4b 100644
--- a/packages/create-module-federation/src/create.ts
+++ b/packages/create-module-federation/src/create.ts
@@ -313,31 +313,6 @@ async function forgeTemplate({
   await renderTemplate(templateDir);
 }
 
-async function getProjectType(template?: string) {
-  if (!template) {
-    return checkCancel<ProjectType>(
-      await select({
-        message: 'Please select the type of project you want to create:',
-        options: [
-          { value: ProjectType.app, label: 'Application' },
-          { value: ProjectType.lib, label: 'Lib' },
-          { value: ProjectType.other, label: 'Other' },
-        ],
-      }),
-    );
-  }
-
-  if (template.startsWith('create-')) {
-    return ProjectType.other;
-  }
-
-  if (template.includes('lib')) {
-    return ProjectType.lib;
-  }
-
-  return ProjectType.app;
-}
-
 export async function create({
   name,
   templates,
@@ -376,13 +351,11 @@ export async function create({
     }),
   );
 
-  // If Zephyr is selected, run the zephyr-apps command and exit
   if (projectType === ProjectType.zephyr) {
     const zephyrPackage = OTHER_TYPE['zephyr'].packageName;
     const zephyrCommand = `${pkgManager} create ${zephyrPackage}`;
     note(`Running: ${zephyrCommand}`, 'Launching Zephyr setup');
 
-    // Execute the Zephyr command based on the user's package manager
     spawnSync(pkgManager, ['create', zephyrPackage], {
       stdio: 'inherit',
       shell: true,
diff --git a/packages/create-module-federation/src/index.ts b/packages/create-module-federation/src/index.ts
index 7218fe8473a..e934916c4b3 100644
--- a/packages/create-module-federation/src/index.ts
+++ b/packages/create-module-federation/src/index.ts
@@ -7,16 +7,12 @@ interface Template {
 }
 
 export const TEMPLATES = [
-  // Standard templates
   'provider-modern',
   'consumer-modern',
   'provider-rsbuild',
   'consumer-rsbuild',
   'rslib',
   'rslib-storybook',
-
-  // other
-  'create-zephyr',
 ];
 
 create({