Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

Rollup

Deploy your Rollup applications to Zephyr Cloud with optimized bundling and Module Federation support. The Zephyr Rollup plugin integrates seamlessly with Rollup's plugin ecosystem.

Prerequisites
Quick Setup with Codemod
npm
yarn
pnpm
bun
npx with-zephyr

This detects your bundler and configures Zephyr automatically. Learn more →

For manual setup, continue below.

Installation

Install the Rollup plugin in your project:

npm
yarn
pnpm
bun
npm add --dev rollup-plugin-zephyr

Quick Start

To add Zephyr to a Rollup application, add the plugin to your Rollup configuration.

// rollup.config.ts
import { defineConfig } from 'rollup';
import { zephyrPlugin } from 'rollup-plugin-zephyr';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default defineConfig({
  input: 'src/main.ts',
  output: {
    dir: 'dist',
    format: 'es',
    entryFileNames: '[name].[hash].js',
    chunkFileNames: '[name].[hash].js',
  },
  plugins: [resolve(), commonjs(), typescript(), zephyrPlugin()],
});

Package.json Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rollup -c",
    "preview": "serve dist"
  }
}

Advanced Configuration

Multiple Output Formats

// rollup.config.ts
import { defineConfig } from 'rollup';
import { zephyrPlugin } from 'rollup-plugin-zephyr';

export default defineConfig([
  // ES Module build
  {
    input: 'src/main.ts',
    output: {
      dir: 'dist/es',
      format: 'es',
    },
    plugins: [
      // ... other plugins
      zephyrPlugin(),
    ],
  },
  // UMD build
  {
    input: 'src/main.ts',
    output: {
      dir: 'dist/umd',
      format: 'umd',
      name: 'MyLibrary',
    },
    plugins: [
      // ... other plugins
      zephyrPlugin(),
    ],
  },
]);

Library Mode

// rollup.config.ts
import { defineConfig } from 'rollup';
import { zephyrPlugin } from 'rollup-plugin-zephyr';

export default defineConfig({
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/my-library.es.js',
      format: 'es',
    },
    {
      file: 'dist/my-library.cjs.js',
      format: 'cjs',
    },
  ],
  external: ['react', 'react-dom'],
  plugins: [
    // ... other plugins
    zephyrPlugin(),
  ],
});