CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-remix-run--dev

Dev tools and CLI for Remix applications providing build tools, development server, Vite integration, and command-line utilities.

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration

Flexible configuration system supporting TypeScript with comprehensive options for app structure, build settings, routing, and future flags.

Capabilities

App Configuration

User-provided configuration interface for customizing Remix application behavior.

/**
 * User-provided configuration for Remix applications
 */
interface AppConfig {
  /** Path to app directory relative to remix.config.js (default: "app") */
  appDirectory?: string;
  
  /** Path to assets build directory relative to remix.config.js (default: "public/build") */
  assetsBuildDirectory?: string;
  
  /** Path to cache directory relative to remix.config.js (default: ".cache") */
  cacheDirectory?: string;
  
  /** URL prefix for browser build with trailing slash (default: "/build/") */
  publicPath?: string;
  
  /** Function for defining custom routes in addition to filesystem routes */
  routes?: (
    defineRoutes: DefineRoutesFunction
  ) => ReturnType<DefineRoutesFunction> | Promise<ReturnType<DefineRoutesFunction>>;
  
  /** Path to server build output relative to remix.config.js */
  serverBuildPath?: string;
  
  /** Conditions to use when resolving server dependencies */
  serverConditions?: string[];
  
  /** Dependencies to bundle with server build */
  serverDependenciesToBundle?: "all" | Array<string | RegExp>;
  
  /** Fields to use when resolving server dependencies */
  serverMainFields?: string[];
  
  /** Whether to minify server build */
  serverMinify?: boolean;
  
  /** Server module format */
  serverModuleFormat?: ServerModuleFormat;
  
  /** Node.js polyfills for server build when targeting non-Node.js platforms */
  serverNodeBuiltinsPolyfill?: NodeBuiltinsPolyfillOptions;
  
  /** Node.js polyfills for browser build */
  browserNodeBuiltinsPolyfill?: NodeBuiltinsPolyfillOptions;
  
  /** Server platform target */
  serverPlatform?: ServerPlatform;
  
  /** Server entrypoint file relative to root directory */
  server?: string;
  
  /** Enable Tailwind CSS support */
  tailwind?: boolean;
  
  /** Enable PostCSS support */
  postcss?: boolean;
  
  /** Patterns for ignored route files in app/routes directory */
  ignoredRouteFiles?: string[];
  
  /** Custom directories to watch during development */
  watchPaths?: string | string[] | (() => Promise<string | string[]> | string | string[]);
  
  /** Development server options */
  dev?: DevConfig;
  
  /** Future feature flags */
  future?: Partial<FutureConfig>;
  
  /** MDX configuration */
  mdx?: RemixMdxConfig | RemixMdxConfigFunction;
}

type ServerModuleFormat = "esm" | "cjs";
type ServerPlatform = "node" | "neutral";

interface DevConfig {
  /** Command to run for manual development mode */
  command?: string;
  /** Manual mode - don't start dev server automatically */
  manual?: boolean;
  /** Development server port */
  port?: number;
  /** TLS key file for HTTPS */
  tlsKey?: string;
  /** TLS certificate file for HTTPS */
  tlsCert?: string;
}

interface NodeBuiltinsPolyfillOptions {
  /** Node.js modules to polyfill */
  modules?: Record<string, string | false>;
  /** Node.js globals to polyfill */
  globals?: Record<string, string | false>;
}

Resolved Configuration

Fully resolved configuration with all defaults applied and computed properties.

/**
 * Fully resolved Remix configuration with defaults applied
 */
interface RemixConfig extends Required<AppConfig> {
  /** Root directory of the project */
  rootDirectory: string;
  
  /** Absolute path to app directory */
  appDirectory: string;
  
  /** Absolute path to cache directory */
  cacheDirectory: string;
  
  /** Absolute path to assets build directory */
  assetsBuildDirectory: string;
  
  /** Relative path to assets build directory */
  relativeAssetsBuildDirectory: string;
  
  /** Public path for assets */
  publicPath: string;
  
  /** Resolved route manifest */
  routes: RouteManifest;
  
  /** Absolute path to server build output */
  serverBuildPath: string;
  
  /** Entry client file path */
  entryClientFile: string;
  
  /** Entry server file path */
  entryServerFile: string;
  
  /** Path to tsconfig.json if present */
  tsconfigPath: string | undefined;
  
  /** Future feature flags with all defaults */
  future: FutureConfig;
}

Configuration Functions

Functions for reading, resolving, and finding configuration files.

/**
 * Read and parse Remix configuration file
 * @param remixRoot - Root directory to search for config (default: process.cwd())
 * @param serverMode - Server mode for configuration
 * @returns Promise resolving to resolved configuration
 */
function readConfig(
  remixRoot?: string, 
  serverMode?: ServerMode
): Promise<RemixConfig>;

/**
 * Resolve configuration by applying defaults and computing derived values
 * @param appConfig - User-provided app configuration
 * @param options - Configuration resolution options
 * @returns Promise resolving to resolved configuration
 */
function resolveConfig(
  appConfig: AppConfig, 
  options: ResolveConfigOptions
): Promise<RemixConfig>;

interface ResolveConfigOptions {
  /** Root directory */
  rootDirectory: string;
  /** Server mode */
  serverMode?: ServerMode;
  /** App directory */
  appDirectory?: string;
  /** Cache directory */
  cacheDirectory?: string;
  /** Assets build directory */
  assetsBuildDirectory?: string;
  /** Public path */
  publicPath?: string;
  /** Entry client file */
  entryClientFile?: string;
  /** Entry server file */
  entryServerFile?: string;
  /** Server build path */
  serverBuildPath?: string;
  /** TypeScript config path */
  tsconfigPath?: string;
}

/**
 * Find configuration file in directory
 * @param dir - Directory to search
 * @param basename - Base name of config file (e.g., "remix.config")
 * @param extensions - File extensions to try
 * @returns Path to config file or undefined if not found
 */
function findConfig(
  dir: string,
  basename: string,
  extensions: string[]
): string | undefined;

Future Configuration

Feature flags for upcoming Remix features and breaking changes.

/**
 * Future feature flags configuration
 */
interface FutureConfig {
  /** Enable fetcher persistence across navigations */
  v3_fetcherPersist: boolean;
  
  /** Enable relative path resolution for splat routes */
  v3_relativeSplatPath: boolean;
  
  /** Enable throwing abort reasons in loaders/actions */
  v3_throwAbortReason: boolean;
  
  /** Enable route configuration API */
  v3_routeConfig: boolean;
  
  /** Enable single fetch optimization */
  v3_singleFetch: boolean;
  
  /** Enable lazy route discovery */
  v3_lazyRouteDiscovery: boolean;
  
  /** Enable unstable dependency optimization */
  unstable_optimizeDeps: boolean;
}

/**
 * Log warnings for future flags that will become defaults
 * @param future - Future configuration to check
 */
function logFutureFlagWarnings(future: Partial<FutureConfig>): void;

MDX Configuration

Configuration for MDX file processing in Remix applications.

/**
 * MDX configuration for Remix
 */
interface RemixMdxConfig {
  /** Rehype plugins for MDX processing */
  rehypePlugins?: any[];
  
  /** Remark plugins for MDX processing */
  remarkPlugins?: any[];
}

/**
 * Function that returns MDX configuration
 * @param filename - Path to MDX file being processed
 * @returns MDX configuration or undefined
 */
type RemixMdxConfigFunction = (
  filename: string
) => Promise<RemixMdxConfig | undefined> | RemixMdxConfig | undefined;

Usage Examples

Basic Configuration

// remix.config.js
import type { AppConfig } from "@remix-run/dev";

export default {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  publicPath: "/build/",
  serverBuildPath: "build/index.js",
  ignoredRouteFiles: ["**/.*"],
} satisfies AppConfig;

Advanced Configuration with Custom Routes

// remix.config.js
import type { AppConfig } from "@remix-run/dev";

export default {
  appDirectory: "app",
  routes(defineRoutes) {
    return defineRoutes((route) => {
      route("/", "routes/home.tsx");
      route("/admin", "routes/admin.tsx", () => {
        route("/users", "routes/admin/users.tsx");
        route("/settings", "routes/admin/settings.tsx");
      });
    });
  },
  future: {
    v3_singleFetch: true,
    v3_lazyRouteDiscovery: true,
    v3_fetcherPersist: true,
  },
  serverDependenciesToBundle: [
    /^remix-utils.*/,
    "marked",
  ],
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeHighlight],
  },
} satisfies AppConfig;

TypeScript Configuration

// remix.config.ts
import type { AppConfig } from "@remix-run/dev";

const config: AppConfig = {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  publicPath: "/build/",
  serverModuleFormat: "esm",
  serverPlatform: "node",
  serverMinify: true,
  tailwind: true,
  postcss: true,
  future: {
    v3_routeConfig: true,
    v3_singleFetch: true,
    v3_lazyRouteDiscovery: true,
    v3_relativeSplatPath: true,
    v3_throwAbortReason: true,
    v3_fetcherPersist: true,
    unstable_optimizeDeps: true,
  },
};

export default config;

Reading Configuration Programmatically

import { readConfig, resolveConfig } from "@remix-run/dev";

// Read configuration from remix.config.js
const config = await readConfig("./my-remix-app");

// Resolve configuration with custom options
const resolvedConfig = await resolveConfig(
  {
    appDirectory: "src",
    publicPath: "/assets/",
  },
  {
    rootDirectory: process.cwd(),
    serverMode: "production",
  }
);

console.log("Routes:", Object.keys(config.routes));
console.log("Build directory:", config.assetsBuildDirectory);

Install with Tessl CLI

npx tessl i tessl/npm-remix-run--dev

docs

build-system.md

cli-commands.md

configuration.md

development-server.md

index.md

route-management.md

vite-integration.md

tile.json