Stop 15 · DevOps & DeploymentTopics · 5/8

Monorepo Tools (Turborepo/Nx)

Part of the Full Stack Developer Roadmap

In short

Once your frontend and backend share types, validation and config, separate repos get painful. A monorepo puts them together, and Turborepo or Nx keep builds fast by skipping work that hasn't changed.

Tools for managing a frontend and backend (and shared code) in a single repository efficiently — with smart build caching and clear dependency boundaries between packages.

The blob character cooks at a long stove of pots, taking spice from one shared round spice box.

Think of it like this

The joint family kitchen

In a joint family, one big kitchen feeds everyone. There's a single shared spice box, and nobody grinds a second batch of masala that's already fresh. A monorepo is that kitchen: apps share packages like types and UI, and the tool's cache skips any build whose ingredients haven't changed.

Watch it happen

One repo, shared packages

my-repo

apps/

web (React)

api (Express)

packages/

types

tsconfig

1/5One Git repo and one install. npm or pnpm workspaces link the packages together.

The big ideas

What you need to know

Shared packages

Types, zod schemas, UI components and configs live once in packages/ and are imported like any npm package.

Task graph

The tool knows web depends on types, so it builds types first and runs independent tasks in parallel.

Caching

If a package's inputs haven't changed, its build or test result is replayed from cache in seconds.

Turborepo vs Nx

Turborepo is small and focuses on running tasks fast. Nx adds generators, plugins and stricter project boundaries.

See it in code

Walk through the code

json

1{2  "tasks": {3    "build": {4      "dependsOn": ["^build"],5      "outputs": ["dist/**", ".next/**", "!.next/cache/**"]6    },7    "test": { "dependsOn": ["^build"] },8    "dev": { "cache": false, "persistent": true }9  }10}

1/4The ^ means 'build my dependencies first', so types is built before web and api.

turbo.json at the repo root, in the Turborepo 2 format. Run npx turbo run build twice and watch the second run finish from cache.

Save yourself the pain

Common mistakes

Oops

Copy-pasting the same Order type into the frontend and the backend.

Do this instead

Put it in packages/types and import it in both. One change updates both sides.

Oops

Leaving out outputs, so the cache has nothing to restore.

Do this instead

Declare each task's output folders in turbo.json, so cached runs can bring back the built files.

Your mission

Your first monorepo

~35 min

Quick check

In turbo.json, what does dependsOn: ['^build'] mean for the build task?

Go deeper

1Set up a monorepo with separate frontend, backend and shared-types packages using Turborepo or Nx.
2Configure a shared types package both apps import from.
3Learn how build caching speeds up CI once your monorepo grows.