Zephyr Cloud Docs

    Modern.js

    Deploy your Modern.js applications to Zephyr Cloud with built-in Rspack integration. Modern.js is a meta-framework that provides full-stack capabilities with performance-first architecture and convention-based development.

    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 Modern.js plugin in your project:

    npm
    yarn
    pnpm
    bun
    deno
    npm add --dev zephyr-modernjs-plugin

    Configuration

    Add the Zephyr plugin to your Modern.js configuration:

    // modern.config.ts
import { appTools, defineConfig } from '@modern-js/app-tools';
import { withZephyr } from 'zephyr-modernjs-plugin';

export default defineConfig({
  output: {
    distPath: {
      html: './',
    },
  },
  html: {
    outputStructure: 'flat',
  },
  source: {
    mainEntryName: 'index',
  },
  runtime: {
    router: true,
  },
  plugins: [
    appTools({
      bundler: 'rspack', // Set to 'webpack' to enable webpack
    }),
    withZephyr(),
  ],
});

    Project Structure

    Modern.js uses file-based routing and conventions:

    my-modernjs-app/
├── src/
│   └── routes/          # File-based routing
│       ├── layout.tsx   # Root layout
│       └── page.tsx     # Home page
├── modern.config.ts     # Modern.js configuration
├── package.json
└── biome.json          # Biome configuration (optional)

    Development Workflow

    Start your development server:

    npm
    yarn
    pnpm
    bun
    deno
    npm dev

    Build for production:

    npm
    yarn
    pnpm
    bun
    deno
    npm build

    Preview production build:

    npm
    yarn
    pnpm
    bun
    deno
    npm serve

    Bundler Options

    Modern.js supports both Rspack (default) and webpack:

    // Use Rspack (recommended)
appTools({
  bundler: 'rspack',
});

// Use webpack
appTools({
  bundler: 'webpack',
});