This example shows how to add Nx to an existing PNPM workspace for the purpose of providing an improved developer experience and obviously speed via caching and incremental task execution.

PNPM workspace repository structured as apps and packages folder. It contains

• a Remix application in the apps/my-remix-app folder
• a React library compiled with TypeScript in the packages/shared-ui folder.
• Remix app imports the shared-ui library

Nx is used for orchestration of the tasks and has according caching and task dependencies defined in nx.json.

Make sure you are in the example folder.

Install all packages via

> pnpm install

Serve the Remix application by running it's dev npm script defined in the apps/my-remix-app/package.json. We can do that with Nx using

> npx nx dev my-remix-app

Run the builds for all projects with

> npx nx run-many --target=build

Run the build of just a single package like the shared-ui with

> npx nx build shared-ui

• 📹 Setup a monorepo with PNPM workspaces and add Nx for speed