ZC
Zephyr Cloud•3w ago
ShaneCodes

rsbuild with zephyr

How do I deploy an rsbuild application with zephyr
Solution:
Just wanted a place to document an rsbuild application deployed with zephyr ```ts const zephyrRsbuildPlugin = (): RsbuildPlugin => ({ name: "zephyr-rsbuild-plugin",...
Jump to solution
1 Reply
Solution
ShaneCodes
ShaneCodes•3w ago
Just wanted a place to document an rsbuild application deployed with zephyr 
const zephyrRsbuildPlugin = (): RsbuildPlugin => ({
  name: "zephyr-rsbuild-plugin",
  setup: (api) => {
    api.modifyRspackConfig(async (config, utils) => {
      //@ts-expect-error
      const zephyrConfig = await withZephyr()(config);
      //@ts-expect-error
      utils.mergeConfig(config, zephyrConfig);
    });
  }
});
const zephyrRsbuildPlugin = (): RsbuildPlugin => ({
  name: "zephyr-rsbuild-plugin",
  setup: (api) => {
    api.modifyRspackConfig(async (config, utils) => {
      //@ts-expect-error
      const zephyrConfig = await withZephyr()(config);
      //@ts-expect-error
      utils.mergeConfig(config, zephyrConfig);
    });
  }
});
rsbuild.config.ts 
export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [
    pluginReact({ splitChunks: { react: false, router: false } }),
    pluginModuleFederation({
          name: "consumer",
          remotes: {
            producer: "producer@http://localhost:3001/remoteEntry.js"
          },
          shared: ["react", "react-dom", "@rsbuild/core"]
        }),
    zephyrRsbuildPlugin()
  ]
});
export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [
    pluginReact({ splitChunks: { react: false, router: false } }),
    pluginModuleFederation({
          name: "consumer",
          remotes: {
            producer: "producer@http://localhost:3001/remoteEntry.js"
          },
          shared: ["react", "react-dom", "@rsbuild/core"]
        }),
    zephyrRsbuildPlugin()
  ]
});

Did you find this page helpful?