or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

authentication.mdclient-runtime.mddatabase.mde2e-testing.mdindex.mdrealtime.mdrouting.mdsynced-state.mdturnstile.mdvite-plugin.mdworker-runtime.md
tile.json

vite-plugin.mddocs/

Vite Plugin

The RedwoodSDK Vite plugin integrates the framework into the Vite build process, handling React Server Components transformation, code splitting between client and server bundles, and Cloudflare-specific optimizations.

Capabilities

Redwood Plugin Function

Creates and configures the RedwoodSDK Vite plugin with optional customization.

/**
 * Creates the RedwoodSDK Vite plugin
 * @param options - Optional configuration for the plugin
 * @returns Promise resolving to an array of Vite plugins
 */
function redwood(options?: RedwoodPluginOptions): Promise<InlineConfig["plugins"]>;

interface RedwoodPluginOptions {
  /** Suppress plugin output and logging */
  silent?: boolean;
  /** Project root directory (defaults to process.cwd()) */
  rootDir?: string;
  /** Include Cloudflare Vite plugin (defaults to true) */
  includeCloudflarePlugin?: boolean;
  /** Include React Vite plugin (defaults to true) */
  includeReactPlugin?: boolean;
  /** Path to wrangler configuration file */
  configPath?: string;
  /** Force specific paths to be treated as client-side code */
  forceClientPaths?: string[];
  /** Force specific paths to be treated as server-side code */
  forceServerPaths?: string[];
  /** Custom entry points */
  entry?: {
    /** Custom worker entry point path */
    worker?: string;
  };
}

Usage Example:

// vite.config.ts
import { defineConfig } from 'vite';
import { redwood } from 'rwsdk/vite';

export default defineConfig({
  plugins: [
    await redwood({
      silent: false,
      includeCloudflarePlugin: true,
      includeReactPlugin: true,
    }),
  ],
});

Advanced Configuration:

// vite.config.ts with custom configuration
import { defineConfig } from 'vite';
import { redwood } from 'rwsdk/vite';

export default defineConfig({
  plugins: [
    await redwood({
      rootDir: __dirname,
      configPath: './wrangler.toml',
      forceClientPaths: ['**/components/**'],
      forceServerPaths: ['**/api/**', '**/db/**'],
      entry: {
        worker: './src/worker.tsx',
      },
    }),
  ],
});

Plugin Behavior

The plugin performs the following operations:

  1. RSC Transformation: Automatically identifies and transforms React Server Components and server functions marked with 'use server'
  2. Code Splitting: Separates client and server code into appropriate bundles for Cloudflare Workers
  3. Module Resolution: Handles special module imports like rwsdk/worker, rwsdk/client, and conditional exports
  4. Build Optimization: Optimizes bundle sizes for edge deployment with tree-shaking and dead code elimination
  5. Development Mode: Provides hot module replacement (HMR) support for both client and server code

Integration with Cloudflare

The plugin integrates seamlessly with the @cloudflare/vite-plugin to provide:

  • Automatic wrangler configuration detection
  • Local Cloudflare Workers development environment
  • Durable Objects and KV namespace binding
  • Environment variable management
  • Production deployment preparation