Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

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
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
npm dev

Build for production:

npm
yarn
pnpm
bun
npm build

Preview production build:

npm
yarn
pnpm
bun
npm serve

Bundler Options

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

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

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