Remix Plugin for Nx

The Remix plugin for Nx, @nx/remix, automatically infers build, dev, start, and typecheck tasks from your Remix configuration and provides generators for applications, libraries, routes, loaders, actions, and meta functions.

You don't need the plugin to use Remix with Nx. Any project already benefits from caching, task orchestration, and the project graph. The plugin adds automatic task inference, route scaffolding, and simplified configuration.

Note

React Router is the successor to Remix. For new projects, consider using React Router instead. Existing Remix projects continue to work with @nx/remix.

Setting Up @nx/remix

Add to an Existing Nx Workspace

Keep Nx Package Versions In Sync

Make sure to install the @nx/remix version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe. Using nx add helps ensure the correct version is installed and configured.

nx add @nx/remix

Verify the plugin is setup:

1. Check for @nx/remix listed as a plugin:

   nx report

2. Ensure inferred project targets are working:

   nx show projects --with-target=build

3. Inspect a specific project configuration for the inferred targets:

   nx show project my-remix-app

Generate a New Application

nx g @nx/remix:app apps/my-app

To start the application in development mode, run nx dev my-app. Read more about the options available for the application generator.

Generate a Library

When developing your application, it often makes sense to split your codebase into smaller, more focused libraries.

nx g @nx/remix:lib libs/my-lib

Read more about the options available for the library generator. Libraries let you share code between applications, enforce architectural boundaries with the project graph, and speed up CI by only rebuilding what changed.

Develop Remix Applications

Generate Routes

nx g @nx/remix:route apps/my-app/app/routes/admin

This creates a new route file in your application's routes directory following Remix's file-based routing conventions. Read more about the options available for the route generator.

Add Loaders, Actions, and Meta

nx g @nx/remix:loader apps/my-app/app/routes/admin
nx g @nx/remix:action apps/my-app/app/routes/admin
nx g @nx/remix:meta apps/my-app/app/routes/admin

These generators add loader, action, and meta functions to existing route files. Read more about the options available for the loader, action, and meta generators.

Serve for Development

nx dev my-app

This starts the Remix development server with hot module replacement at http://localhost:3000.

Build for Production

nx build my-app

Compiles the application for production deployment. The output is written to the build directory inside your project folder by default.

Start Production Server

nx start my-app

Serves the production build using remix-serve. Depends on build completing first.

Use Libraries in Your Application

Import library code directly into your route files:

apps/my-app/app/routes/_index.tsx

import { MyComponent } from '@myorg/my-lib';

export default function Index() {
  return <MyComponent />;
}

You can also use library code in loaders by exporting from a separate server entry point:

libs/my-lib/src/server.ts

export { myLoader } from './lib/my-loader';

apps/my-app/app/routes/admin.tsx

import { myLoader } from '@myorg/my-lib/server';

export const loader = myLoader;

Configure @nx/remix

How @nx/remix Infers Tasks

The @nx/remix plugin creates tasks for any project that has a Remix configuration file. The plugin recognizes two setups:

Classic Remix Compiler -- looks for any of the following files:

• remix.config.js
• remix.config.mjs
• remix.config.cjs

Remix with Vite -- looks for vite.config.{js,ts,mjs,mts,cjs,cts} files that import the Remix plugin from @remix-run/dev.

Plugin Options

Configure @nx/remix/plugin in the plugins array in nx.json:

nx.json

{
  "plugins": [
    {
      "plugin": "@nx/remix/plugin",
      "options": {
        "buildTargetName": "build",
        "devTargetName": "dev",
        "startTargetName": "start",
        "typecheckTargetName": "typecheck"
      }
    }
  ]
}

Option	Description	Default
buildTargetName	Name of the production build task	build
devTargetName	Name of the development server task	dev
startTargetName	Name of the production server task	start
typecheckTargetName	Name of the typecheck task	typecheck

Exclude or Include Specific Projects

Use include/exclude glob patterns in the plugin configuration:

nx.json

{
  "plugins": [
    {
      "plugin": "@nx/remix/plugin",
      "include": ["apps/**/*"],
      "exclude": ["apps/legacy-app/**/*"],
      "options": {
        "buildTargetName": "build",
        "devTargetName": "dev",
        "startTargetName": "start",
        "typecheckTargetName": "typecheck"
      }
    }
  ]
}

View Inferred Tasks

To see what tasks Nx inferred for a project:

nx show project my-app

Or open the project details view in Nx Console.

CI Considerations

See Set Up CI for a complete CI configuration guide.

Build and Test Only What Changed

nx affected -t build test typecheck lint

This uses the project graph to determine which projects are affected by your changes and only runs tasks for those. Read more about the benefits of nx affected.

Remote Caching

Share build and typecheck cache results across your team and CI with remote caching:

nx connect

What's Next

React Router Guide React Router is the successor to Remix. Learn how to use it with Nx.

React Monorepo Tutorial Build a React monorepo step-by-step with Nx.

Generators Reference Full API reference for @nx/remix generators.

Executors Reference Full API reference for @nx/remix executors.

Migrations Reference Full reference for @nx/remix migrations.