Dev tools and CLI for Remix applications providing build tools, development server, Vite integration, and command-line utilities.
—
Flexible configuration system supporting TypeScript with comprehensive options for app structure, build settings, routing, and future flags.
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>;
}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;
}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;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;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;// 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;// 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;// 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;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