@nx/remix

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, Playwright 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

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.

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

❯

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.

nx.json
1{ 2 "plugins": [ 3 { 4 "plugin": "@nx/remix/plugin", 5 "options": { 6 "buildTargetName": "build", 7 "devTargetName": "dev", 8 "startTargetName": "start", 9 "typecheckTargetName": "typecheck" 10 } 11 } 12 ] 13} 14

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

Using the Remix Plugin

Generate a Remix Application

~/acme❯

nx g @nx/remix:app apps/myapp

1NX Generating @nx/remix:application 2 3✔ What unit test runner should be used? · vitest 4✔ Which E2E test runner would you like to use? · playwright 5 6UPDATE package.json 7UPDATE nx.json 8CREATE apps/myapp/project.json 9CREATE apps/myapp/README.md 10CREATE apps/myapp/app/nx-welcome.tsx 11CREATE apps/myapp/app/root.tsx 12CREATE apps/myapp/app/routes/_index.tsx 13CREATE apps/myapp/public/favicon.ico 14CREATE apps/myapp/remix.config.js 15CREATE apps/myapp/remix.env.d.ts 16CREATE apps/myapp/tests/routes/_index.spec.tsx 17CREATE apps/myapp/tsconfig.app.json 18CREATE apps/myapp/tsconfig.json 19CREATE apps/myapp/.gitignore 20CREATE apps/myapp/package.json 21CREATE apps/myapp/tsconfig.spec.json 22CREATE apps/myapp/vitest.config.ts 23CREATE apps/myapp/test-setup.ts 24CREATE apps/myapp/.eslintrc.json 25CREATE apps/myapp/.eslintignore 26CREATE apps/myapp-e2e/project.json 27CREATE apps/myapp-e2e/src/example.spec.ts 28CREATE apps/myapp-e2e/playwright.config.ts 29CREATE apps/myapp-e2e/tsconfig.json 30CREATE apps/myapp-e2e/.eslintrc.json 31

Build, Serve and Test your Application

  1. To build your application run:

~/acme❯

nx build myapp

1> nx run myapp:build 2 3Building Remix app in production mode... 4 5Built in 857ms 6 7—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 8 9NX Successfully ran target build for project myapp (3s) 10
  1. To serve your application for use during development run:

~/acme❯

nx dev myapp

1> nx run myapp:dev 2 3> remix dev --manual 4 5💿 remix dev 6 7info building... 8info built (388ms) 9[remix-serve] http://localhost:3000 (http://192.168.0.12:3000) 10
  1. To test the application using vitest run:

~/acme❯

nx test myapp

1> nx run myapp:test 2 3> vitest 4 5 6 RUN v1.6.0 /Users/columferry/dev/nrwl/issues/gh_issues/nx26943/apps/myapp 7 8 ✓ tests/routes/_index.spec.tsx (1) 9 ✓ renders loader data 10 11 Test Files 1 passed (1) 12 Tests 1 passed (1) 13 Start at 13:22:54 14 Duration 533ms (transform 47ms, setup 68ms, collect 123ms, tests 36ms, environment 204ms, prepare 35ms) 15 16 17——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 18 19 NX Successfully ran target test for project myapp (950ms) 20

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:

~/acme❯

nx g @nx/remix:lib libs/login

1NX Generating @nx/remix:library 2 3✔ What test runner should be used? · vitest 4UPDATE nx.json 5UPDATE package.json 6CREATE babel.config.json 7CREATE libs/login/project.json 8CREATE libs/login/.eslintrc.json 9CREATE libs/login/README.md 10CREATE libs/login/src/index.ts 11CREATE libs/login/tsconfig.lib.json 12CREATE libs/login/tsconfig.json 13CREATE libs/login/vite.config.ts 14CREATE libs/login/tsconfig.spec.json 15CREATE libs/login/src/lib/login.module.css 16CREATE libs/login/src/lib/login.spec.tsx 17CREATE libs/login/src/lib/login.tsx 18UPDATE tsconfig.base.json 19CREATE libs/login/src/test-setup.ts 20CREATE libs/login/src/server.ts 21

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

apps/myapp/app/routes/index.tsx

1import { Login } from '@acme/login'; 2 3export default function Index() { 4 return ( 5 <div> 6 <Login /> 7 </div> 8 ); 9} 10

You can also run test on your library:

nx test login

Generating a Route

To generate a route for your application:

~/acme❯

nx g @nx/remix:route apps/myapp/app/routes/admin

1NX Generating @nx/remix:route 2 3CREATE apps/myapp/app/routes/admin.tsx 4CREATE apps/myapp/app/styles/admin.css 5

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:

~/acme❯

nx g @nx/remix:loader apps/myapp/app/routes/admin.tsx

1NX Generating @nx/remix:loader 2 3UPDATE apps/myapp/app/routes/admin.tsx 4
  1. Add a new file in your login lib

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

1import { json, LoaderFunctionArgs } from '@remix-run/node'; 2 3export const adminLoader = async ({ request }: LoaderFunctionArgs) => { 4 return json({ 5 message: 'Hello, world!', 6 }); 7}; 8

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

1export * from './lib/admin/admin.loader'; 2
  1. Use the loader in your apps/myapp/app/routes/admin.tsx

Replace the default loader code:

1export const loader = async ({ request }: LoaderFunctionArgs) => { 2 return json({ 3 message: 'Hello, world!', 4 }); 5}; 6

with

1import { adminLoader } from '@acme/login/server'; 2 3export const loader = adminLoader; 4

GitHub Repository with Example

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

Example repository/nrwl/nx-recipes/tree/main/remix

Package reference

Here is a list of all the executors and generators available from this package.

Guides

Executors

  • serve

    Serve a Remix application.

  • build

    Build a Remix application.

Generators

  • presetInternal

    Generate a new Remix workspace

  • setupInternal

    Setup a Remix in an existing workspace

  • application

    Generate a new Remix application

  • cypress-component-configuration

    Generate a Cypress Component Testing configuration for a Remix project

  • library

    Generate a new library

  • initInternal

    Initialize the @nx/remix plugin.

  • route

    Generate a new route

  • resource-route

    Generate a new resource route

  • action

    Add an action function to an existing route

  • loader

    Add a loader function to an existing route

  • style

    Generates a new stylesheet and adds it to an existing route

  • setup-tailwind

    Generates a TailwindCSS configuration for the Remix application

  • storybook-configuration

    Generates a Storybook configuration for a Remix application

  • meta

    Add a meta function to an existing route

  • error-boundary

    Add an ErrorBoundary to an existing route

  • convert-to-inferred

    Convert existing Remix project(s) using @nx/remix:* executors to use @nx/remix/plugin. Defaults to migrating all projects. Pass '--project' to migrate only one target.