@edgeone/react-router-pages

EdgeOne adapter plugin for React Router - Automatically converts React Router build output to EdgeOne deployment format with zero configuration.

Features

• ✅ Automatic Asset Migration - Copies build/client to .edgeone/assets
• ✅ Server Bundling - Bundles server code into a single file (SSR mode)
• ✅ Route Metadata Generation - Generates meta.json configuration
• ✅ Multi-Mode Support - CSR, SSR, and Hybrid (SSR + Prerender)
• ✅ Tree-Shaking - Removes unused code automatically
• ✅ Zero External Dependencies - Bundled file requires only Node.js built-ins

Installation

npm install @edgeone/react-router-pages --save-dev

Quick Start

Add the plugin to vite.config.ts:

import { reactRouter } from "@react-router/dev/vite";
import { edgeoneAdapter } from "@edgeone/react-router-pages";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [reactRouter(), edgeoneAdapter()],
});

Build your project:

npm run build

Output structure:

.edgeone/
├── assets/              # Static assets
├── server-handler/      # Server code (SSR only)
│   └── index.mjs       # Single-file server
└── meta.json           # Route metadata

Configuration

interface EdgeOneAdapterOptions {
  port?: number; // Default: 9000
  outputDir?: string; // Default: .edgeone
  cleanOutput?: boolean; // Default: true
  verbose?: boolean; // Default: false
}

Example:

edgeoneAdapter({
  port: 8080,
  outputDir: "dist/edgeone",
  verbose: true,
});

Rendering Modes

CSR (Client-Side Rendering)

Configure in react-router.config.ts:

export default { ssr: false } satisfies Config;

Deploy to any static hosting:

npx serve .edgeone/assets

SSR (Server-Side Rendering)

Configure in react-router.config.ts:

export default { ssr: true } satisfies Config;

Run locally:

node .edgeone/server-handler/index.mjs
# Server at http://localhost:9000

Hybrid (SSR + Prerender)

export default {
  ssr: true,
  async prerender() {
    return ["/", "/about"];
  },
} satisfies Config;

Deployment

EdgeOne Platform

1. Upload .edgeone directory
2. Set static path: .edgeone/assets
3. Set server entry: .edgeone/server-handler/index.mjs

Docker

FROM node:18-alpine
WORKDIR /app
COPY .edgeone .edgeone
EXPOSE 9000
CMD ["node", ".edgeone/server-handler/index.mjs"]

Static Hosting (CSR)

# Vercel
vercel --prod .edgeone/assets

# Netlify
netlify deploy --prod --dir=.edgeone/assets

Build Process

The adapter uses esbuild to bundle the server with the following optimizations:

• Platform: Node.js 18+
• Format: ESM
• Tree-shaking: Enabled
• External: Node.js built-in modules only
• Bundle size: ~1.88 MB (includes React, React Router, and all dependencies)

Troubleshooting

Build fails: Ensure build/client exists. Run npm run build first.

Port in use:

PORT=8080 node .edgeone/server-handler/index.mjs

Missing routes: Enable verbose logging:

edgeoneAdapter({ verbose: true });

Environment Variables

• PORT - Server port (default: 9000)

Requirements

• Node.js >= 18.0.0
• Vite >= 5.0.0
• React Router >= 7.0.0

License

MIT