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