CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tanstack--react-start

Modern full-stack React framework with SSR, streaming, server functions, and API routes powered by TanStack Router and Vite.

—

Pending
Overview
Eval results
Files

vite-plugin.mddocs/

Vite Plugin

The TanStack Start Vite plugin provides seamless integration with Vite for development and build processes. It configures automatic transformations, optimizations, and provides the necessary tooling for server functions, isomorphic functions, and SSR support.

Capabilities

TanStack Start Plugin

The main Vite plugin that provides complete integration with TanStack Start features.

/**
 * Creates the TanStack Start Vite plugin with configuration options
 * @param options - Plugin configuration options
 * @returns Array of Vite plugins for complete Start integration
 */
function tanstackStart(
  options?: TanStackStartInputConfig
): Array<PluginOption>;

interface TanStackStartInputConfig {
  /** Framework type - currently only 'react' is supported */
  framework?: 'react';

  /** Default entry point paths for different environments */
  defaultEntryPaths?: {
    client?: string;
    server?: string;
    start?: string;
  };

  /** Additional plugin-specific options */
  [key: string]: any;
}

interface PluginOption {
  name: string;
  configResolved?: (config: any) => void;
  configureServer?: (server: any) => void;
  buildStart?: (options: any) => void;
  transform?: (code: string, id: string) => any;
}

Usage Examples:

// Basic Vite configuration
import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";

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

// Advanced configuration with custom options
export default defineConfig({
  plugins: [
    tanstackStart({
      framework: "react",
      defaultEntryPaths: {
        client: "./src/entry.client.tsx",
        server: "./src/entry.server.tsx",
        start: "./src/entry.start.ts"
      }
    })
  ],
  // Additional Vite configuration
  build: {
    target: "esnext"
  }
});

// Multiple environments configuration
export default defineConfig(({ command, mode }) => ({
  plugins: [
    tanstackStart({
      framework: "react",
      // Environment-specific configuration
      ...(mode === "production" && {
        optimizeDeps: {
          include: ["react", "react-dom"]
        }
      })
    })
  ]
}));

Plugin Configuration

Environment-Specific Settings

The plugin automatically configures different settings for client and server environments:

// Client environment configuration
{
  resolve: {
    dedupe: ["react", "react-dom", "@tanstack/react-start", "@tanstack/react-router"]
  },
  optimizeDeps: {
    exclude: ["@tanstack/react-start", "@tanstack/react-router"],
    include: [
      "react",
      "react/jsx-runtime",
      "react/jsx-dev-runtime",
      "react-dom",
      "react-dom/client"
    ]
  }
}

// Server environment configuration
{
  optimizeDeps: {
    exclude: ["@tanstack/react-start", "@tanstack/react-router"],
    include: [
      "react",
      "react/jsx-runtime",
      "react/jsx-dev-runtime",
      "react-dom",
      "react-dom/server"
    ]
  }
}

Default Entry Points

The plugin provides default entry points that can be customized:

// Default entry point paths
const defaultEntryPaths = {
  client: path.resolve(__dirname, "../default-entry/client.tsx"),
  server: path.resolve(__dirname, "../default-entry/server.ts"),
  start: path.resolve(__dirname, "../default-entry/start.ts")
};

// Custom entry points
const customConfig = {
  defaultEntryPaths: {
    client: "./src/custom-client.tsx",
    server: "./src/custom-server.ts",
    start: "./src/custom-start.ts"
  }
};

Development Features

Hot Module Replacement

The plugin integrates with Vite's HMR system for rapid development:

// Automatic HMR for server functions
if (import.meta.hot) {
  import.meta.hot.accept('./server-functions', () => {
    // Server functions are automatically reloaded
  });
}

// HMR for isomorphic functions
if (import.meta.hot) {
  import.meta.hot.accept('./isomorphic-functions', () => {
    // Both client and server implementations are updated
  });
}

Development Server Integration

The plugin configures the Vite development server for optimal Start development:

// Development server configuration
{
  server: {
    middlewareMode: false,
    hmr: true,
    // Server function handling in development
    proxy: {
      '/api/functions': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

Build Configuration

Production Optimizations

The plugin applies production-specific optimizations during build:

// Production build configuration
{
  build: {
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM"
        }
      }
    },
    minify: "esbuild",
    sourcemap: true
  }
}

Code Splitting

Automatic code splitting for optimal loading performance:

// Client bundle splitting
{
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
          router: ["@tanstack/react-router"],
          start: ["@tanstack/react-start"]
        }
      }
    }
  }
}

// Server bundle configuration
{
  build: {
    ssr: true,
    rollupOptions: {
      external: ["react", "react-dom", "node:*"],
      output: {
        format: "esm"
      }
    }
  }
}

Advanced Plugin Usage

Multi-Environment Builds

Configure different builds for various deployment targets:

import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";

export default defineConfig(({ command, mode }) => {
  const isProduction = mode === "production";
  const isCloudflare = process.env.PLATFORM === "cloudflare";

  return {
    plugins: [
      tanstackStart({
        framework: "react",
        // Platform-specific configurations
        ...(isCloudflare && {
          target: "webworker",
          external: ["node:*"]
        })
      })
    ],
    define: {
      __PRODUCTION__: isProduction,
      __PLATFORM__: JSON.stringify(process.env.PLATFORM || "node")
    }
  };
});

Custom Transformations

Add custom transformations for specific use cases:

import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";

export default defineConfig({
  plugins: [
    tanstackStart(),
    {
      name: "custom-server-fn-transform",
      transform(code, id) {
        if (id.includes("server-functions")) {
          // Custom transformations for server functions
          return {
            code: transformServerFunctions(code),
            map: null
          };
        }
      }
    }
  ]
});

Integration with Other Tools

Combine with other Vite plugins and tools:

import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    tanstackStart(),

    // Bundle analyzer
    visualizer({
      filename: "dist/stats.html",
      open: true,
      gzipSize: true
    }),

    // Custom environment handling
    {
      name: "environment-config",
      configResolved(config) {
        if (config.command === "serve") {
          // Development-specific setup
          process.env.NODE_ENV = "development";
        }
      }
    }
  ],

  // Environment variables
  define: {
    __VERSION__: JSON.stringify(process.env.npm_package_version),
    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
  }
});

Environment Variables and Constants

Vite Environment Names

The plugin recognizes specific environment names for configuration:

const VITE_ENVIRONMENT_NAMES = {
  client: "client",
  server: "server",
  start: "start"
} as const;

// Usage in plugin configuration
if (environmentName === VITE_ENVIRONMENT_NAMES.client) {
  // Client-specific configuration
} else if (environmentName === VITE_ENVIRONMENT_NAMES.server) {
  // Server-specific configuration
}

Build-time Constants

Constants available during build and runtime:

// Available in your application code
declare const __PRODUCTION__: boolean;
declare const __VERSION__: string;
declare const __BUILD_TIME__: string;
declare const __PLATFORM__: "node" | "cloudflare" | "vercel";

// Usage
if (__PRODUCTION__) {
  console.log(`Production build ${__VERSION__} built at ${__BUILD_TIME__}`);
}

Types

// Main plugin configuration interface
interface TanStackStartInputConfig {
  framework?: 'react';
  defaultEntryPaths?: {
    client?: string;
    server?: string;
    start?: string;
  };
  target?: 'node' | 'webworker' | 'browser';
  external?: string[];
  optimizeDeps?: {
    include?: string[];
    exclude?: string[];
    noDiscovery?: boolean;
  };
  resolve?: {
    noExternal?: boolean | string[];
    external?: string[];
  };
}

// Vite plugin option type
interface PluginOption {
  name: string;
  configResolved?: (config: ResolvedConfig) => void | Promise<void>;
  configureServer?: (server: ViteDevServer) => void | Promise<void>;
  buildStart?: (options: NormalizedInputOptions) => void | Promise<void>;
  resolveId?: (id: string, importer?: string) => string | null | Promise<string | null>;
  load?: (id: string) => string | null | Promise<string | null>;
  transform?: (code: string, id: string) => TransformResult | Promise<TransformResult>;
  generateBundle?: (options: OutputOptions, bundle: OutputBundle) => void | Promise<void>;
}

// Environment names constants
interface ViteEnvironmentNames {
  readonly client: "client";
  readonly server: "server";
  readonly start: "start";
}

// Transform result type
interface TransformResult {
  code: string;
  map?: string | SourceMap | null;
}

// Vite configuration types (from Vite)
interface ResolvedConfig {
  command: "build" | "serve";
  mode: string;
  isProduction: boolean;
  env: Record<string, any>;
  resolve: ResolveOptions;
  plugins: Plugin[];
}

interface ViteDevServer {
  middlewares: any;
  hot: any;
  ws: any;
  config: ResolvedConfig;
}

// Build options
interface NormalizedInputOptions {
  input: string | string[] | Record<string, string>;
  external: (string | RegExp)[] | RegExp | string | ((id: string, parentId: string, isResolved: boolean) => boolean);
  plugins: Plugin[];
}

interface OutputOptions {
  format: "amd" | "cjs" | "es" | "iife" | "umd" | "system";
  file?: string;
  dir?: string;
  globals?: Record<string, string>;
}

interface OutputBundle {
  [fileName: string]: OutputAsset | OutputChunk;
}

Constants

// Vite environment names used by the plugin
const VITE_ENVIRONMENT_NAMES: ViteEnvironmentNames;

// Default plugin configuration
const DEFAULT_CONFIG: TanStackStartInputConfig;

// Internal plugin markers
const TANSTACK_START_PLUGIN_NAME: "tanstack-react-start:config";
const TANSTACK_START_CORE_PLUGIN_NAME: "tanstack-start-plugin-core";

Install with Tessl CLI

npx tessl i tessl/npm-tanstack--react-start

docs

index.md

isomorphic-functions.md

middleware.md

request-response.md

rpc-system.md

server-functions.md

server-utilities.md

ssr-components.md

vite-plugin.md

tile.json