Remix with Nx

In this recipe, we'll show you how to create a Remix application with Nx.

Create Nx Workspace

~/❯

npx create-nx-workspace acme --preset=apps

> NX Let's create a new workspace [https://nx.dev/getting-started/intro] ✔ Enable distributed caching to make your CI faster · Yes > NX Creating your v16.3.2 workspace. To make sure the command works reliably in all environments, and that the preset is applied correctly, Nx will run "npm install" several times. Please wait. ✔ Installing dependencies with npm ✔ Successfully created the workspace: acme. —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— > NX First time using Nx? Check out this interactive Nx tutorial. https://nx.dev/tutorials/package-based-repo-tutorial

Install Nx Remix Plugin

❯

npm install --save-dev @nx/remix

Nx 15 and lower use @nrwl/ instead of @nx/

Generate a Remix Application

~/acme❯

nx g @nx/remix:app myapp

> 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
Nx 15 and lower use @nrwl/ instead of @nx/

Build, Serve and Test your Application

  1. To build your application run:

~/acme❯

nx build myapp

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

~/acme❯

nx serve myapp

> nx run myapp:serve 💿 Building... 💿 Rebuilt in 377ms Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000)
  1. To test the application using vitest run:

~/acme❯

nx test myapp

> 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:

~/acme❯

nx g @nx/remix:lib login

> 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
Nx 15 and lower use @nrwl/ instead of @nx/

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:

~/acme❯

nx g @nx/remix:route admin --project=myapp

> NX Generating @nx/remix:route CREATE apps/myapp/app/routes/admin.tsx CREATE apps/myapp/app/styles/admin.css
Nx 15 and lower use @nrwl/ instead of @nx/

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 admin --project=myapp

> NX Generating @nx/remix:loader UPDATE apps/myapp/app/routes/admin.tsx
Nx 15 and lower use @nrwl/ instead of @nx/
  1. Add a new file in your login lib

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

import { json, LoaderArgs } from '@remix-run/node'; export const adminLoader = async ({ request }: LoaderArgs) => { return json({ message: 'Hello, world!', }); };

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

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

Replace the default loader code:

export const loader = async ({ request }: LoaderArgs) => { 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.

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