diff --git a/README.md b/README.md index 3134a6560fa..669696346d8 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ Come and chat with us on [Discussions](https://github.com/module-federation/univ Please read the [Contributing Guide](https://github.com/module-federation/core/blob/main/CONTRIBUTING.md). -![Alt](https://repobeats.axiom.co/api/embed/856dc1d4a6965d225232b1bd2da5d54549dc169e.svg "Repobeats analytics image") +![Alt](https://repobeats.axiom.co/api/embed/856dc1d4a6965d225232b1bd2da5d54549dc169e.svg 'Repobeats analytics image') ## 🙌 Code of Conduct diff --git a/apps/website-new/docs/en/guide/_meta.json b/apps/website-new/docs/en/guide/_meta.json index 3fb1acfc38c..8dd1cc7cd6a 100644 --- a/apps/website-new/docs/en/guide/_meta.json +++ b/apps/website-new/docs/en/guide/_meta.json @@ -14,6 +14,11 @@ "name": "framework", "label": "Frameworks" }, + { + "type": "dir", + "name": "deployment", + "label": "Deployment" + }, { "type": "dir", "name": "debug", diff --git a/apps/website-new/docs/en/guide/deployment/_meta.json b/apps/website-new/docs/en/guide/deployment/_meta.json new file mode 100644 index 00000000000..29f1fb2428d --- /dev/null +++ b/apps/website-new/docs/en/guide/deployment/_meta.json @@ -0,0 +1,3 @@ +[ + "zephyr" +] diff --git a/apps/website-new/docs/en/guide/deployment/zephyr.mdx b/apps/website-new/docs/en/guide/deployment/zephyr.mdx new file mode 100644 index 00000000000..984cb2e7c6f --- /dev/null +++ b/apps/website-new/docs/en/guide/deployment/zephyr.mdx @@ -0,0 +1,41 @@ +# Deploy with Zephyr Cloud + +[Zephyr Cloud](https://zephyr-cloud.io) is a zero-config deployment platform that integrates directly into your build process and provides global edge distribution for Module Federation applications. + +#### How to deploy + +1. Install the Zephyr plugin for your bundler (supports Webpack, Rspack, Vite, etc...): + +import InstallKit from '@components/common/install-kit'; + + + +2. Add the plugin to your webpack configuration: + +```javascript title='webpack.config.js' +import { withZephyr } from 'zephyr-webpack-plugin'; +const { + ModuleFederationPlugin, +} = require('@module-federation/enhanced/webpack'); +const mfConfig = require('./module-federation.config'); + +module.exports = withZephyr()({ + devServer: { + port: 2000, + }, + output: { + publicPath: 'http://localhost:2000/', + }, + plugins: [new ModuleFederationPlugin(mfConfig)], +}); +``` + +3. Build your project as usual: + +```bash +npm run build +``` + +During the build process, your Module Federation application will be automatically deployed to Zephyr's global edge network and you'll receive a deployment URL. Zephyr Cloud handles asset optimization, dependency resolution, and provides automatic rollback capabilities for your micro-frontend applications. diff --git a/apps/website-new/docs/zh/guide/_meta.json b/apps/website-new/docs/zh/guide/_meta.json index 3d8c1ab4cb0..b17c1fc1610 100644 --- a/apps/website-new/docs/zh/guide/_meta.json +++ b/apps/website-new/docs/zh/guide/_meta.json @@ -14,6 +14,11 @@ "name": "framework", "label": "框架" }, + { + "type": "dir", + "name": "deployment", + "label": "部署" + }, { "type":"dir", "name":"debug", diff --git a/apps/website-new/docs/zh/guide/deployment/_meta.json b/apps/website-new/docs/zh/guide/deployment/_meta.json new file mode 100644 index 00000000000..d435b13ba39 --- /dev/null +++ b/apps/website-new/docs/zh/guide/deployment/_meta.json @@ -0,0 +1,3 @@ +[ + "zephyr" +] \ No newline at end of file diff --git a/apps/website-new/docs/zh/guide/deployment/zephyr.mdx b/apps/website-new/docs/zh/guide/deployment/zephyr.mdx new file mode 100644 index 00000000000..729c2ca2e48 --- /dev/null +++ b/apps/website-new/docs/zh/guide/deployment/zephyr.mdx @@ -0,0 +1,41 @@ +# 使用 Zephyr Cloud 部署 + +[Zephyr Cloud](https://zephyr-cloud.io) 是一个零配置部署平台,直接集成到您的构建流程中,为模块联邦应用程序提供全球边缘分发。 + +#### 如何部署 + +1. 为您的打包工具安装 Zephyr 插件(支持 Webpack、Rspack、Vite 等): + +import InstallKit from '@components/common/install-kit'; + + + +2. 将插件添加到您的 webpack 配置中: + +```javascript title='webpack.config.js' +import { withZephyr } from 'zephyr-webpack-plugin'; +const { + ModuleFederationPlugin, +} = require('@module-federation/enhanced/webpack'); +const mfConfig = require('./module-federation.config'); + +module.exports = withZephyr()({ + devServer: { + port: 2000, + }, + output: { + publicPath: 'http://localhost:2000/', + }, + plugins: [new ModuleFederationPlugin(mfConfig)], +}); +``` + +3. 像往常一样构建您的项目: + +```bash +npm run build +``` + +在构建过程中,您的模块联邦应用程序将自动部署到 Zephyr 的全球边缘网络,您将收到一个部署 URL。Zephyr Cloud 处理资源优化、依赖解析,并为您的微前端应用程序提供自动回滚功能。 \ No newline at end of file