Summary - Monorepo

Combine Yarn workspaces, Turborepo and shared packages to set up a monorepo.

Summary - Monorepo

A monorepo keeps many packages in one repo. Yarn workspaces and npm workspaces are built-in solutions; both use the workspaces field and set up symlinks.

Turborepo cuts build time with parallel execution and a cache. Shared packages (@my/ui, @my/utils) prevent code duplication; apps use them with a normal import.

Exercise Shared theme package

Define a colors object. The primary key should be '#0066ff', the background key '#ffffff'. Export it with export.

Show example solution

// Define the colors object here
const colors = {
  primary: '#0066ff',
  background: '#ffffff'
};

export default colors;

Exercise Turborepo build script

Add scripts to a root package.json. It should contain "build": "turbo run build".

Show example solution

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "build": "turbo run build"
  }
}

Test yourself

What is the biggest gain of a monorepo?
- A smaller APK
- Writing fewer tests
- Fewer UI components
- Code sharing and single repo
Show answer

Code sharing and single repo — Code sharing is the core gain of a monorepo.
Match all the tools

Yarn workspaces

Yarn built-in
npm workspaces

npm built-in
Turborepo

Build accelerator
@my/ui

Shared package

Next lesson: accessibilityLabel

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies