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 the Remix plugin
{% 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](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
{% /callout %}
Adding the Remix plugin to an existing Nx workspace can be done with the following:
{% tabs %}
{% tab label="npm" %}
```shell
npm add -D @nx/remix
```
{% /tab %}
{% tab label="yarn" %}
```shell
yarn add -D @nx/remix
```
{% /tab %}
{% tab label="pnpm" %}
```shell
pnpm 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](/deprecated/as-provided-vs-derived) for more details.
{% /callout %}
```{% command="nx g @nx/remix:app myapp --directory=apps/myapp" path="~/acme" %}
> 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:
```{% command="nx build myapp" path="~/acme" %}
> 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:
```{% command="nx serve myapp" path="~/acme" %}
> 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:
```{% command="nx test myapp" path="~/acme" %}
> 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 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:
```{% command="nx g @nx/remix:lib login --directory=libs/login" path="~/acme" %}
> 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`
```tsx
import { Login } from '@acme/login';
export default function Index() {
return (
);
}
```
You can also run test on your library:
`nx test login`
## Generating a Route
To generate a route for your application:
```{% command="nx g @nx/remix:route admin --path=apps/myapp/app/routes" path="~/acme" %}
> 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:
```{% command="nx g @nx/remix:loader admin --path=apps/myapp/app/routes" path="~/acme" %}
> 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`
```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:
```ts
export * from './lib/admin/admin.loader';
```
3. Use the loader in your `apps/myapp/app/routes/admin.tsx`
Replace the default loader code:
```tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
return json({
message: 'Hello, world!',
});
};
```
with
```tsx
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" /%}