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

1 > NX Let's create a new workspace [https://nx.dev/getting-started/intro] 2 3✔ Do you want Nx Cloud to make your CI fast? · Yes 4 5 > NX Creating your v16.3.2 workspace. 6 7 To make sure the command works reliably in all environments, and that the preset is applied correctly, 8 Nx will run "npm install" several times. Please wait. 9 10✔ Installing dependencies with npm 11✔ Successfully created the workspace: acme. 12 13 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 14 15 16 > NX First time using Nx? Check out this interactive Nx tutorial. 17 18 https://nx.dev/tutorials/package-based-repo-tutorial 19

Install Nx Remix Plugin

Keep Nx Package Versions In Sync

Make sure to install the @nx/remix version that is on the same minor version as the nx version 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.

Generate a Remix Application

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.

~/acme❯

nx g @nx/remix:app myapp --directory=apps/myapp

1> NX Generating @nx/remix:application 2 3✔ What unit test runner should be used? · vitest 4 5CREATE apps/myapp/project.json 6UPDATE package.json 7CREATE apps/myapp/README.md 8CREATE apps/myapp/app/root.tsx 9CREATE apps/myapp/app/routes/_index.tsx 10CREATE apps/myapp/public/favicon.ico 11CREATE apps/myapp/remix.config.js 12CREATE apps/myapp/remix.env.d.ts 13CREATE apps/myapp/tsconfig.json 14CREATE apps/myapp/.gitignore 15CREATE apps/myapp/package.json 16UPDATE nx.json 17CREATE tsconfig.base.json 18CREATE .prettierrc 19CREATE .prettierignore 20UPDATE .vscode/extensions.json 21CREATE apps/myapp/vite.config.ts 22CREATE apps/myapp/tsconfig.spec.json 23CREATE apps/myapp/test-setup.ts 24CREATE apps/myapp-e2e/cypress.config.ts 25CREATE apps/myapp-e2e/src/e2e/app.cy.ts 26CREATE apps/myapp-e2e/src/fixtures/example.json 27CREATE apps/myapp-e2e/src/support/commands.ts 28CREATE apps/myapp-e2e/src/support/e2e.ts 29CREATE apps/myapp-e2e/tsconfig.json 30CREATE apps/myapp-e2e/project.json 31CREATE .eslintrc.json 32CREATE .eslintignore 33CREATE apps/myapp-e2e/.eslintrc.json 34
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

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

~/acme❯

nx serve myapp

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

~/acme❯

nx test myapp

1> nx run myapp:test 2 3 RUN v0.31.4 /Users/columferry/dev/nrwl/issues/remixguide/acme/apps/myapp 4stderr | app/routes/index.spec.ts > test > should render 5Warning: 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. 6 ✓ app/routes/index.spec.ts (1 test) 10ms 7 Test Files 1 passed (1) 8 Tests 1 passed (1) 9 Start at 16:15:45 10 Duration 1.20s (transform 51ms, setup 139ms, collect 180ms, tests 10ms, environment 379ms, prepare 103ms) 11 12 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 13 14 > NX Successfully ran target test for project myapp (2s) 15

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 --directory=libs/login

1> NX 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
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

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 admin --path=apps/myapp/app/routes

1> NX Generating @nx/remix:route 2 3CREATE apps/myapp/app/routes/admin.tsx 4CREATE apps/myapp/app/styles/admin.css 5
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 --path=apps/myapp/app/routes

1> NX Generating @nx/remix:loader 2 3UPDATE apps/myapp/app/routes/admin.tsx 4
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

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