#Rspack

Deploy your Rspack applications to Zephyr Cloud with blazing-fast Rust-based bundling and Module Federation support. The Zephyr Rspack plugin integrates seamlessly with Rspack's high-performance build process.

npx with-zephyr

yarn dlx with-zephyr

pnpx with-zephyr

bunx with-zephyr

#Installation

Install the Rspack plugin in your project:

npm add --dev zephyr-rspack-plugin

yarn add --dev zephyr-rspack-plugin

pnpm add --dev zephyr-rspack-plugin

bun add --dev zephyr-rspack-plugin

deno add --dev npm:zephyr-rspack-plugin

#Quick Start

To add Zephyr to an Rspack application, wrap the entire Rspack configuration with the withZephyr function.

// rspack.config.ts
import { Configuration } from '@rspack/core';
import { withZephyr } from 'zephyr-rspack-plugin';
import path from 'path';

const config: Configuration = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: 'builtin:swc-loader',
      },
    ],
  },
};

export default withZephyr()(config);

#Module Federation

Zephyr has first party support for Module Federation. You don't need to do any additional configuration to enable Module Federation in Zephyr.

Zephyr will hook into the bundling process and modify the remote resolution to point to the Zephyr Cloud deployments.

#Host Application

// rspack.config.ts
import { Configuration } from '@rspack/core';
import { withZephyr } from 'zephyr-rspack-plugin';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';

const config: Configuration = {
  entry: './src/index.tsx',
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        mfe1: 'mfe1@http://localhost:3001/mf-manifest.json',
        mfe2: 'mfe2@http://localhost:3002/mf-manifest.json',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

export default withZephyr()(config);

#Remote Application

// rspack.config.ts
import { Configuration } from '@rspack/core';
import { withZephyr } from 'zephyr-rspack-plugin';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';

const config: Configuration = {
  entry: './src/index.tsx',
  plugins: [
    new ModuleFederationPlugin({
      name: 'mfe1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
        './Header': './src/components/Header',
        './utils': './src/utils',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

export default withZephyr()(config);

#Package.json Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "dev": "rspack serve --mode development",
    "build": "rspack build --mode production",
    "build:dev": "rspack build --mode development",
    "serve": "rspack serve"
  }
}

#Advanced Configuration

#Environment-Specific Builds

// rspack.config.js
const { withZephyr } = require('zephyr-rspack-plugin');

const config = {
  entry: './src/index.js',
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

module.exports = withZephyr({
  deploy: process.env.NODE_ENV === 'production',
  environment: process.env.NODE_ENV || 'development',
})(config);

#Custom Optimization

// rspack.config.js
const { withZephyr } = require('zephyr-rspack-plugin');

const config = {
  entry: './src/index.js',
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\\\/]node_modules[\\\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

module.exports = withZephyr()(config);

#Development Server

Rspack provides a fast development server with hot reloading:

# Start development server
pnpm dev

# Start with custom port
pnpm dev -- --port 3000

# Start with host binding
pnpm dev -- --host 0.0.0.0

#Dev Server Configuration

// rspack.config.js
const config = {
  entry: './src/index.js',
  devServer: {
    port: 3000,
    hot: true,
    historyApiFallback: true,
    open: true,
  },
};

module.exports = withZephyr()(config);

#Features

• 🚀 Blazing-fast builds with Rust-based bundling
• 🏗️ Full Module Federation support with enhanced features
• 📦 Asset optimization and intelligent caching
• 🔧 Zero-config setup for simple applications
• 📊 Build analytics and deployment monitoring
• 🌐 Global CDN distribution for optimal performance
• ⚡ Hot module replacement in development
• 💾 Built-in SWC for ultra-fast transpilation
• 🔗 Webpack compatibility for easy migration

#Requirements

• Rspack 0.3 or higher
• Node.js 18 or higher
• Zephyr Cloud account (sign up here)

#Common Issues

#Module Federation Setup

For enhanced Module Federation features:

const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/rspack');

// Use enhanced plugin for better runtime and development experience
const config = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'my-app',
      // Enhanced features available
      runtimePlugins: ['./mf-runtime.js'],
    }),
  ],
};

#Performance Optimization

For optimal build performance:

const config = {
  experiments: {
    css: true, // Enable CSS support
  },
  optimization: {
    realContentHash: true,
  },
};

#Next Steps

• Module Federation Tutorial
• Multi-bundler Setup
• Join our Discord for support

#Related Documentation

Module Federation:

• Module Federation Guide - Complete guide to micro-frontends
• Create MF App Tutorial - Step-by-step module federation setup
• Remote Dependencies - Advanced dependency resolution

Integration Guides:

• React + Rspack - React with Rspack integration
• React + Rspack + Nx - Monorepo setup with Nx
• Multi-bundler Setup - Using multiple bundlers together
• Existing App Integration - Add Zephyr to existing applications

Other Bundlers:

• Rsbuild - Higher-level tool built on Rspack
• Webpack - Original bundler with wide ecosystem
• Vite - Lightning-fast development with native ESM

Features:

• Versions - Understanding version management
• Tags & Environments - Deployment strategies
• CI/CD Integration - Automated deployments