@pitlane/vite-plugin-remix weekly downloads statistics

@pitlane/vite-plugin-remix

A Vite plugin for Remix. It builds client and server bundles with an asset manifest for @pitlane/assets, gives clientEntry() islands portable identities that Remix's render({ assets }) resolves, serves development requests through your app's fetch handler, and previews the production build. It works with Vite and Vite+.

Your server entry exports a standard fetch handler. Use platform plugins such as @cloudflare/vite-plugin, @netlify/vite-plugin, or nitro/vite in the same Vite config, or run the built application on Node, Bun, or Deno.

Install

npm install --save-dev @pitlane/vite-plugin-remix
npm install @pitlane/assets
# or
vp add -D @pitlane/vite-plugin-remix
vp add @pitlane/assets

@pitlane/assets goes in dependencies because app/assets.ts imports its resolver at runtime. Requires remix@^3.0.0 and vite@>=8.1 as peers, on Node ^20.19.0 || >=22.12.0. Compatibility lists the versions this release was tested against, and the starter templates are complete example projects.

This package was published as @pitlane/dev through 0.7. The upgrade table lists every change.

Quick start

// vite.config.ts
import { remix } from "@pitlane/vite-plugin-remix";
import { defineConfig } from "vite"; // or "vite-plus"

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

// app/assets.ts
import { createAssetResolver } from "@pitlane/assets";
import manifest from "@pitlane/assets/manifest";

export let assets = createAssetResolver(manifest);

export let scriptEntry = await assets.getScriptEntry("app/entry.browser.ts");
export let stylesheets = await assets.getStylesheets("app/entry.server.tsx");

// app/entry.server.tsx
import { render } from "remix/middleware/render";
import { staticFiles } from "remix/middleware/static";
import { createRouter, type MiddlewareContext } from "remix/router";

import { assets } from "./assets.ts";
import { Document } from "./document.tsx";
import { routes } from "./routes.ts";

let renderMiddleware = render({ assets });
type AppContext = MiddlewareContext<[typeof renderMiddleware]>;

declare module "remix/router" {
    interface RouterTypes {
        context: AppContext;
    }
}

export let router = createRouter<AppContext>({
    middleware: [staticFiles("./dist/client"), renderMiddleware],
});

router.map(routes.home, ({ render }) => render(<Document />));

export default router;

if (import.meta.hot) {
    import.meta.hot.accept();
}

The document reads scriptEntry and stylesheets from app/assets.ts; see Document assets.

// app/entry.browser.ts
import { run } from "remix/component";

run({
    async loadModule(moduleUrl, exportName) {
        let mod = await import(/* @vite-ignore */ moduleUrl);
        return mod[exportName];
    },
});

vite dev serves the app through your router. vite build produces dist/ssr and dist/client. vite preview serves the production build through the same fetch handler production runs.

Hot module replacement

vite dev hot-updates both halves of a Remix app in place, keeping live client state. Full details, including which edits preserve state and which remount, are in the HMR guide.

Components. Editing a component swaps its new code in without remounting, so hydrated clientEntry() islands keep their state (open menus, form input, counters). This runs the remix/component-hmr transforms during dev. Both authoring styles hot-swap, because the plugin normalizes arrow-form component and clientEntry() exports to named functions before instrumenting them:

// All of these hot-swap in place, preserving live state:
export const Counter = clientEntry(import.meta.url, handle => {
    /* ... */
});
export const Toggle = clientEntry(import.meta.url, function Toggle(handle) {
    /* ... */
});
export const Card = handle => () => <div />;
export function Panel(handle) {
    /* ... */
}

Only named (PascalCase) component exports in .tsx/.jsx files whose setup returns a render function are instrumented; other exports are left untouched. Editing the render function keeps live state. Editing the setup scope above the return remounts the component, so its state resets.

Server data. Editing a server-only module (the document, a middleware, a route handler, any module the client never imports) re-fetches the current page through your fetch handler and reconciles the new server-rendered HTML into the DOM. Hydrated island state survives, so you see fresh server output without a full-page reload. This is the Remix analog of React Router's loader/action revalidation, driven through the frame runtime rather than a client data router.

The plugin broadcasts a server:update event; your browser entry keeps the runtime run() returns and passes it to revalidate from @pitlane/vite-plugin-remix/hmr when one arrives:

// app/entry.browser.ts
import { revalidate } from "@pitlane/vite-plugin-remix/hmr";
import { run } from "remix/component";

let app = run({
    async loadModule(moduleUrl, exportName) {
        let mod = await import(/* @vite-ignore */ moduleUrl);
        return mod[exportName];
    },
});

if (import.meta.hot) {
    import.meta.hot.on("server:update", () => revalidate(app));
}
```…