@nx/remix

Next generation full stack framework and build system together. Build better websites with Remix and Nx.

Nx makes supercharges your builds, and the optional Nx Cloud provide out-of-the-box distributed caching, distributed task execution, and valuable workspace insights.

Creating new Remix workspace

Use --preset=@nx/remix when creating new workspace.

e.g.

npx create-nx-workspace@latest acme \
--preset=@nx/remix \
--project=demo

Now, you can go into the acme folder and start development.

cd acme
npx nx dev demo

Note: This command runs the dev script in apps/demo/package.json.

Start the production server with one command.

npx nx start demo

Note: This will run the build before starting (as defined in nx.json).

Existing workspaces

You can add Remix to any existing Nx workspace.

First, install the plugin:

npm install --save-dev @nx/remix

# Or with yarn
yarn add -D @nx/remix

Then, run the setup generator:

npx nx g @nx/remix:setup

You can then add your first app and run it:

npx nx g @nx/remix:app demo

Adding new routes

Add a new route with one command.

npx nx g route

# e.g.
npx nx g route foo/bar --project=demo

Browse to http://localhost:3000/foo/bar to see the new route.

Workspace libraries

The Remix setup leverages npm/yarn/pnpm workspaces and Nx buildable libraries.

npx nx g @nx/remix:lib mylib

Import the new library in your app.

// apps/demo/app/root.tsx
import { Mylib } from '@acme/mylib';

// ...

export default function App() {
  return (
    <Document>
      <Layout>
        <Mylib />
        <Outlet />
      </Layout>
    </Document>
  );
}

Now, run the dev server again to see the new library in action.

npx nx dev demo

Note: You must restart the server if you make any changes to your library. Luckily, with Nx cache this operation should be super fast.

Contributing

Running unit tests

Run nx test demo to execute the unit tests via Jest.

Publishing

nx publish demo --ver=[version]