tessl/npm-remix-run--dev

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@remix-run/dev

Name: tessl/npm-remix-run--dev
Author: tessl

@remix-run/dev provides essential development tools and CLI for Remix, a full stack web framework focused on user interface and web fundamentals. It includes build tools, development server, bundling capabilities, and command-line utilities that enable developers to create, develop, and deploy Remix applications with TypeScript support, Hot Module Replacement (HMR), and integration with various deployment targets.

Package Information

Package Name: @remix-run/dev
Package Type: npm
Language: TypeScript/JavaScript
Installation: npm install -D @remix-run/dev

Core Imports

import { vitePlugin, cloudflareDevProxyVitePlugin, getDependenciesToBundle } from "@remix-run/dev";
import type { AppConfig, RemixConfig, VitePluginConfig, AssetsManifest } from "@remix-run/dev";
import * as cli from "@remix-run/dev";

For CLI access:

npx remix --help

CommonJS:

const { vitePlugin, cloudflareDevProxyVitePlugin, getDependenciesToBundle } = require("@remix-run/dev");

Basic Usage

// vite.config.ts
import { defineConfig } from "vite";
import { vitePlugin } from "@remix-run/dev";

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

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

export default {
  appDirectory: "app",
  assetsBuildDirectory: "public/build", 
  publicPath: "/build/",
  routes(defineRoutes) {
    return defineRoutes((route) => {
      route("/", "routes/home.tsx");
    });
  }
} satisfies AppConfig;

Architecture

@remix-run/dev is built around several key systems:

Vite Integration: Modern build tooling with the Remix Vite plugin for development and production builds
CLI System: Command-line interface providing init, build, dev, and routes commands
Configuration System: Flexible configuration with TypeScript support and future flags
Route Management: Advanced routing with flat routes, custom route definitions, and manifest generation
Development Server: Live reload, HMR, and development-time features
Compiler System: Legacy esbuild-based compilation system (being replaced by Vite)

Capabilities

Vite Integration

Modern build system integration with Vite providing fast development experience, optimized production builds, and plugin ecosystem support.

function vitePlugin(config?: Partial<VitePluginConfig>): RemixVitePlugin;

interface VitePluginConfig {
  appDirectory?: string;
  assetsBuildDirectory?: string;
  buildDirectory?: string;
  entryClientFile?: string;
  entryServerFile?: string;
  publicPath?: string;
  routes?: AppConfig["routes"];
  ssr?: boolean;
  serverBuildFile?: string;
  ignoredRouteFiles?: string[];
  future?: Partial<FutureConfig>;
  basename?: string;
  buildEnd?: (args: { viteConfig: ResolvedViteConfig }) => void | Promise<void>;
  presets?: Preset[];
  serverBundles?: ServerBundlesFunction;
}

type RemixVitePlugin = (config?: VitePluginConfig) => Plugin[];

interface Preset {
  name: string;
  remixConfig?: () => AppConfig | Promise<AppConfig>;
  remixConfigResolved?: (remixConfig: RemixConfig) => void | Promise<void>;
  viteConfig?: (env: { mode: string; command: string }) => ViteUserConfig | Promise<ViteUserConfig>;
}

type ServerBundlesFunction = (args: {
  branch: RouteManifestEntry[];
}) => string;

function cloudflareDevProxyVitePlugin<Env = {}, Cf extends CfProperties = {}>(
  options: CloudflareDevProxyOptions<Env, Cf>
): Plugin;

Vite Integration

CLI Commands

Complete command-line interface for Remix project management including project initialization, development server, build system, and route inspection.

// CLI module exports (import * as cli from "@remix-run/dev")
function init(projectDir: string, options?: InitFlags): Promise<void>;
function routes(remixRoot?: string, flags?: RoutesFlags): Promise<void>;
function build(remixRoot: string, mode?: string, sourcemap?: boolean): Promise<void>;
function viteBuild(root?: string, options?: ViteBuildOptions): Promise<void>;
function watch(remixRootOrConfig: string | RemixConfig, mode?: string): Promise<void>;
function dev(remixRoot: string, flags?: DevFlags): Promise<void>;
function viteDev(root: string, options?: ViteDevOptions): Promise<void>;
function generateEntry(entry: string, remixRoot: string, flags?: GenerateEntryFlags): Promise<void>;
function setup(): void; // deprecated

interface InitFlags {
  deleteScript?: boolean;
}

interface RoutesFlags {
  config?: string;
  json?: boolean;
}

interface DevFlags {
  command?: string;
  manual?: boolean;
  port?: number;
  tlsKey?: string;
  tlsCert?: string;
}

interface GenerateEntryFlags {
  typescript?: boolean;
  config?: string;
}

interface ViteBuildOptions {
  assetsInlineLimit?: number;
  clearScreen?: boolean;
  config?: string;
  emptyOutDir?: boolean;
  logLevel?: "info" | "warn" | "error" | "silent";
  minify?: boolean | "terser" | "esbuild";
  mode?: string;
  profile?: boolean;
  sourcemap?: boolean | "inline" | "hidden";
  target?: string | string[];
  watch?: object;
}

interface ViteDevOptions {
  clearScreen?: boolean;
  config?: string;
  cors?: boolean;
  force?: boolean;
  host?: string | boolean;
  logLevel?: "info" | "warn" | "error" | "silent";
  mode?: string;
  open?: boolean | string;
  port?: number;
  profile?: boolean;
  strictPort?: boolean;
}

CLI Commands

Configuration System

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

interface AppConfig {
  appDirectory?: string;
  assetsBuildDirectory?: string;
  cacheDirectory?: string;
  publicPath?: string;
  routes?: (defineRoutes: DefineRoutesFunction) => ReturnType<DefineRoutesFunction> | Promise<ReturnType<DefineRoutesFunction>>;
  serverBuildPath?: string;
  serverConditions?: string[];
  serverDependenciesToBundle?: string[] | RegExp | ((id: string) => boolean);
  serverMainFields?: string[];
  serverMinify?: boolean;
  serverModuleFormat?: ServerModuleFormat;
  serverPlatform?: ServerPlatform;
  tailwind?: boolean;
  postcss?: boolean;
  future?: Partial<FutureConfig>;
  mdx?: RemixMdxConfig | RemixMdxConfigFunction;
}

function readConfig(remixRoot?: string, serverMode?: ServerMode): Promise<RemixConfig>;
function resolveConfig(appConfig: AppConfig, options: ResolveConfigOptions): Promise<RemixConfig>;

Configuration

Route Management

Advanced routing system supporting flat routes, custom route definitions, nested routes, and dynamic route generation with TypeScript support.

function UNSAFE_defineRoutes(callback: (defineRoutes: DefineRouteFunction) => void): RouteManifest;

interface DefineRouteFunction {
  (
    path: string | undefined,
    file: string,
    optionsOrChildren?: DefineRouteOptions | (() => void),
    children?: () => void
  ): void;
}

function UNSAFE_flatRoutes(
  appDirectory: string,
  ignoredFilePatterns?: string[],
  prefix?: string
): RouteManifest;

Route Management

Build System

Production build system with asset optimization, code splitting, server-side rendering support, and deployment target configuration.

// Build-related functions from CLI
function build(remixRoot: string, mode?: string, sourcemap?: boolean): Promise<void>;
function viteBuild(root?: string, options?: ViteBuildOptions): Promise<void>;
function watch(remixRootOrConfig: string | RemixConfig, mode?: string): Promise<void>;

Build System

Development Server

Development server with live reload, Hot Module Replacement (HMR), and development-time optimizations.

// Development server functions
function dev(remixRoot: string, flags?: DevFlags): Promise<void>;
function viteDev(root: string, options?: ViteDevOptions): Promise<void>;

Development Server

Utility Functions

Helper functions for dependency management and configuration.

function getDependenciesToBundle(...pkg: string[]): string[];

Types

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

interface RemixConfig extends Required<AppConfig> {
  rootDirectory: string;
  appDirectory: string;
  cacheDirectory: string;
  assetsBuildDirectory: string;
  relativeAssetsBuildDirectory: string;
  publicPath: string;
  routes: RouteManifest;
  serverBuildPath: string;
  entryClientFile: string;
  entryServerFile: string;
  tsconfigPath: string | undefined;
  future: FutureConfig;
}

interface FutureConfig {
  v3_fetcherPersist: boolean;
  v3_relativeSplatPath: boolean;
  v3_throwAbortReason: boolean;
  v3_routeConfig: boolean;
  v3_singleFetch: boolean;
  v3_lazyRouteDiscovery: boolean;
  unstable_optimizeDeps: boolean;
}

type AssetsManifest = {
  version: string;
  url?: string;
  entry: {
    module: string;
    imports: string[];
  };
  routes: {
    [routeId: string]: {
      id: string;
      parentId?: string;
      path?: string;
      index?: boolean;
      caseSensitive?: boolean;
      module: string;
      imports?: string[];
      hasAction: boolean;
      hasLoader: boolean;
      hasClientAction: boolean;
      hasClientLoader: boolean;
      hasErrorBoundary: boolean;
    };
  };
  hmr?: {
    timestamp?: number;
    runtime: string;
  };
};

interface RouteManifest {
  [routeId: string]: RouteManifestEntry;
}

interface RouteManifestEntry {
  id: string;
  parentId?: string;
  path?: string;
  index?: boolean;
  caseSensitive?: boolean;
  file: string;
  hasAction: boolean;
  hasLoader: boolean;
  hasClientAction: boolean;
  hasClientLoader: boolean;
  hasErrorBoundary: boolean;
  imports?: string[];
}