nx/docs/generated/packages/remix/documents/overview.md

title	description
Overview of the Nx Remix Plugin	The Nx Plugin for Remix contains executors, generators, and utilities for managing Remix applications and libraries within an Nx workspace.

The Nx Plugin for Remix contains executors, generators, and utilities for managing Remix applications and libraries within an Nx workspace. It provides:

• Integration with libraries such as Storybook, Jest, Vitest and Cypress.
• Generators to help scaffold code quickly, including:
  • Libraries, both internal to your codebase and publishable to npm
  • Routes
  • Loaders
  • Actions
  • Meta
• Utilities for automatic workspace refactoring.

Setting up @nx/remix

Installation

{% callout type="note" title="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. {% /callout %}

In any Nx workspace, you can install @nx/remix by running the following command:

{% tabs %} {% tab label="Nx 18+" %}

nx add @nx/remix

This will install the correct version of @nx/remix.

How @nx/remix Infers Tasks

The @nx/remix plugin will create a task for any project that has a Remix configuration file present. Any of the following files will be recognized as a Remix configuration file:

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

View Inferred Tasks

To view inferred tasks for a project, open the project details view in Nx Console or run nx show project my-project --web in the command line.

@nx/remix Configuration

The @nx/remix/plugin is configured in the plugins array in nx.json.

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

• The buildTargetName, serveTargetName, startTargetName and typecheckTargetName options control the names of the inferred Remix tasks. The default names are build, serve, start and typecheck.

{% /tab %} {% tab label="Nx < 18" %}

Install the @nx/remix package with your package manager.

npm add -D @nx/remix

{% /tab %} {% /tabs %}

Using the Remix Plugin

Generate a Remix Application

{% callout type="note" title="Directory Flag Behavior Changes" %} The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the as-provided vs. derived documentation for more details. {% /callout %}

>  NX  Generating @nx/remix:application

✔ What unit test runner should be used? · vitest

CREATE apps/myapp/project.json
UPDATE package.json
CREATE apps/myapp/README.md
CREATE apps/myapp/app/root.tsx
CREATE apps/myapp/app/routes/_index.tsx
CREATE apps/myapp/public/favicon.ico
CREATE apps/myapp/remix.config.js
CREATE apps/myapp/remix.env.d.ts
CREATE apps/myapp/tsconfig.json
CREATE apps/myapp/.gitignore
CREATE apps/myapp/package.json
UPDATE nx.json
CREATE tsconfig.base.json
CREATE .prettierrc
CREATE .prettierignore
UPDATE .vscode/extensions.json
CREATE apps/myapp/vite.config.ts
CREATE apps/myapp/tsconfig.spec.json
CREATE apps/myapp/test-setup.ts
CREATE apps/myapp-e2e/cypress.config.ts
CREATE apps/myapp-e2e/src/e2e/app.cy.ts
CREATE apps/myapp-e2e/src/fixtures/example.json
CREATE apps/myapp-e2e/src/support/commands.ts
CREATE apps/myapp-e2e/src/support/e2e.ts
CREATE apps/myapp-e2e/tsconfig.json
CREATE apps/myapp-e2e/project.json
CREATE .eslintrc.json
CREATE .eslintignore
CREATE apps/myapp-e2e/.eslintrc.json

Build, Serve and Test your Application

1. To build your application run:

> nx run myapp:build

Building Remix app in production mode...

Built in 857ms

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target build for project myapp (3s)

2. To serve your application for use during development run:

> nx run myapp:serve

💿 Building...
💿 Rebuilt in 377ms
Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000)

3. To test the application using vitest run:

> nx run myapp:test

 RUN  v0.31.4 /Users/columferry/dev/nrwl/issues/remixguide/acme/apps/myapp
stderr | app/routes/index.spec.ts > test > should render
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
 ✓ app/routes/index.spec.ts  (1 test) 10ms
 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  16:15:45
   Duration  1.20s (transform 51ms, setup 139ms, collect 180ms, tests 10ms, environment 379ms, prepare 103ms)

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target test for project myapp (2s)

Generating an Nx Library

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

To generate a library to use in your Remix application run:

>  NX  Generating @nx/remix:library

✔ What test runner should be used? · vitest
UPDATE nx.json
UPDATE package.json
CREATE babel.config.json
CREATE libs/login/project.json
CREATE libs/login/.eslintrc.json
CREATE libs/login/README.md
CREATE libs/login/src/index.ts
CREATE libs/login/tsconfig.lib.json
CREATE libs/login/tsconfig.json
CREATE libs/login/vite.config.ts
CREATE libs/login/tsconfig.spec.json
CREATE libs/login/src/lib/login.module.css
CREATE libs/login/src/lib/login.spec.tsx
CREATE libs/login/src/lib/login.tsx
UPDATE tsconfig.base.json
CREATE libs/login/src/test-setup.ts
CREATE libs/login/src/server.ts

You can then use the library by importing one of the exports into your application:

apps/myapp/app/routes/index.tsx

import { Login } from '@acme/login';

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

You can also run test on your library:

nx test login

Generating a Route

To generate a route for your application:

>  NX  Generating @nx/remix:route

CREATE apps/myapp/app/routes/admin.tsx
CREATE apps/myapp/app/styles/admin.css

Using a loader from your Library

To use a Route Loader where the logic lives in your library, follow the steps below.

1. Generate a loader for your route:

>  NX  Generating @nx/remix:loader

UPDATE apps/myapp/app/routes/admin.tsx

2. Add a new file in your login lib

libs/login/src/lib/admin/admin.loader.ts

import { json, LoaderFunctionArgs } from '@remix-run/node';

export const adminLoader = async ({ request }: LoaderFunctionArgs) => {
  return json({
    message: 'Hello, world!',
  });
};

Export the function from the libs/login/src/server.ts file:

export * from './lib/admin/admin.loader';

3. Use the loader in your apps/myapp/app/routes/admin.tsx

Replace the default loader code:

export const loader = async ({ request }: LoaderFunctionArgs) => {
  return json({
    message: 'Hello, world!',
  });
};

with

import { adminLoader } from '@acme/login/server';

export const loader = adminLoader;

GitHub Repository with Example

You can see an example of an Nx Workspace using Remix by clicking below.

{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/remix" /%}