Turborepo starter

This is an official pnpm starter turborepo.

What's inside?

This turborepo uses pnpm as a package manager. It includes the following packages/apps:

Apps and Packages

• docs: a Next.js app
• web: another Next.js app
• ui: a stub React component library shared by both web and docs applications
• eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Build

To build all apps and packages, run the following command:

cd my-turborepo
pnpm build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
pnpm dev

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
pnpx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:

pnpx turbo link

Best practices

Workspaces

Workspaces are the building blocks of your monorepo. Each app and package you add to your monorepo will be inside its own workspace.

Workspaces are managed by your package manager, such as pnpm, yarn, or npm, so make sure you've set that up first. We recommend pnpm. It's faster than the others and offers some helpful options like --filter.

{% note %}

Note: Plenty of this information is sourced directly from the Turborepo documentation and is a great place to go for further information.

{% endnote %}

Configuring workspaces

We organize our workspaces into top-level apps/ and packages/ directories.

The apps folder should contain workspaces for launch-able apps, such as a Next.js or Astro app.

The packages folder should contain workspaces for packages used by either an app or another package.

When using pnpm, add the folders you want to configure as workspaces to the pnpm-workspace.yaml file that exists in your root directory. This file contains a list of workspace folders in the form of globs:

packages:
  - "apps/*"
  - "packages/*"

Naming workspaces

Each workspace has a unique name, which is specified in its package.json:

{
  "name": "@project-name/shared-utils"
}

You can use an npm organization or user scope to avoid collisions with existing packages on npm. For instance, use @project-name/shared-utils instead of simply shared-utils.

Workspaces which depend on each other

To use a workspace inside another workspace, you'll need to specify it as a dependency, using its name.

For instance, if we want apps/web to import packages/shared-utils, we'd need to add @project-name/shared-utils as a dependency inside apps/web/package.json:

{
  "dependencies": {
    "@project-name/shared-utils": "workspace:*"
  }
}

Just like a normal package, we'd need to run install from root afterwards. Once installed, we can use the workspace as if it were any other package from node_modules.

Useful Links

Learn more about the power of Turborepo:

• Pipelines
• Caching
• Remote Caching
• Scoped Tasks
• Configuration Options
• CLI Usage