Nx with Remix

Upgrade to Nx 24

The Nx 24 migration converts @nx/remix:build and @nx/remix:serve targets to @nx/remix/plugin inferred tasks. It does not upgrade your application to React Router. Applications already using inference need no conversion.

To run the conversion yourself:

nx g @nx/remix:convert-to-inferred

Run your application's build and other existing targets after conversion. Review any warnings for options that the converter could not migrate.

Migrate your applications

The migrate-to-react-router prompt migration upgrades your applications to React Router v7 with @nx/react. When you run nx migrate --run-migrations with the agentic flow enabled, your AI agent applies it. Otherwise, Nx lists the prompt file in the next-steps output so you can give it to your agent yourself. The prompt covers framework changes and Nx configuration, including last-mile fixes. It asks the agent to run build and other relevant targets to validate the result.

You can also follow the official Remix v2 migration guide. Register @nx/react/router-plugin for the migrated applications and update any target overrides or CI commands that still reference Remix.

Remove @nx/remix only after no project or shared configuration needs it. Check for createWatchPaths and Cypress component-testing preset imports as well as plugin registrations.

Requirements

The retained plugin supports @remix-run/dev version ^2.0.0. Keep @nx/remix on the same version as nx until you remove it.

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:

The classic Remix compiler uses one of these files:

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

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

The configuration directory must also contain a package.json or project.json.

Plugin options

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

{
  "plugins": [
    {
      "plugin": "@nx/remix/plugin",
      "options": {
        "buildTargetName": "build",
        "devTargetName": "dev",
        "startTargetName": "start",
        "serveStaticTargetName": "serve-static",
        "buildDepsTargetName": "build-deps",
        "watchDepsTargetName": "watch-deps"
      }
    }
  ]
}

Option	Description	Default
`buildTargetName`	Name of the cached production build task.	`build`
`devTargetName`	Name of the continuous development server task.	`dev`
`startTargetName`	Name of the continuous production server task.	`start`
`serveStaticTargetName`	Name of an alias for the production server task.	`serve-static`
`buildDepsTargetName`	Name of an optional dependency build task.	none
`watchDepsTargetName`	Name of an optional dependency watch task.	none

The build task is cached, with outputs based on your Remix configuration. @nx/js/typescript creates the typecheck task instead of this plugin. The production server tasks depend on the build task.

Exclude or include specific projects

Use include/exclude glob patterns in the plugin configuration:

{
  "plugins": [
    {
      "plugin": "@nx/remix/plugin",
      "include": ["apps/**/*"],
      "exclude": ["apps/legacy-app/**/*"],
      "options": {
        "buildTargetName": "build",
        "devTargetName": "dev",
        "startTargetName": "start",
        "serveStaticTargetName": "serve-static",
        "buildDepsTargetName": "build-deps",
        "watchDepsTargetName": "watch-deps"
      }
    }
  ]
}

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.

A target defaults plugin filter for these tasks must use the exact identifier @nx/remix/plugin.

Set up CI for your Remix monorepo

In CI, Nx runs nx affected to rebuild and retest only the projects a change touches, and caches results to skip repeated work.

For a complete pipeline, see Set up CI.

What's next

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

Learn Nx Tutorial Build a monorepo step-by-step with Nx.

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

Migrations Reference Full reference for @nx/remix migrations.