Turborepo for Monorepo

Turborepo

Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.

A blog post by Refine introduces Turborepo quite well. Read it here.

Turborepo docs

Getting started

yarn global add turbo

Add Turborepo golobally.

Create you project:

npx create-turbo@latest

Need to install the following packages:
create-turbo@2.3.3
Ok to proceed? (y) y
? Where would you like to create your Turborepo? ./my-turborepo
? Which package manager do you want to use? yarn

>>> Creating a new Turborepo with:

Application packages
 - apps/docs
 - apps/web
Library packages
 - packages/eslint-config
 - packages/typescript-config
 - packages/ui

>>> Success! Created your Turborepo at my-turborepo

To get started:
- Change to the directory: cd my-turborepo
- Enable Remote Caching (recommended): npx turbo login
   - Learn more: https://turbo.build/repo/remote-cache

- Run commands with Turborepo:
   - yarn run build: Build all apps and packages
   - yarn run dev: Develop all apps and packages
   - yarn run lint: Lint all apps and packages
- Run a command twice to hit cache

npm -> npx | yarn -> dlx

From the project’s readme file:

What’s inside?

This Turborepo includes the following packages/apps:

Apps and Packages

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

Each package/app is 100% TypeScript.

Monorepo:

Before going any further, I want to clear up my mind and write things down so that everything is not just in my head.

Watching this new project created, this contains 2 Nextjs Apps inside it.

So, Suppose I have an organization that has different user portals for different users types.

An app for :

1. Client
2. Delivery executives
3. Vendor
4. Admin
5. Server

For now every project has it’s own git repo, this will create a lot of burden for developers to maintain new release.

We added a new api in Server that has to be used by client.

1. Current directory: Server
2. cd to Client
3. Add changed
4. Build it
5. Test it
6. Deploy it
7. cd back to Server
8. Work new feature

Over a period of time this will take a lot of time and it will not be a good practice.

Image from Turborepo introduction.

See every app has there own build time which compounds and gives slow output.

Now to solve this Turborepo combines all the build computation and cache from all the projects in that repo containing all the projects.

This will reduce the build time by a lot.

This image too shows multiple developers using same cache to develop in monorepo project.

Turborepo commands:

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/yarn dev

Running projects:

Using arrow keys the outputs from two apps can be toggled!! 😱

Yes I went to get the emoji and pasted it here, come on it’s worth it!

This will the docs app in default turborepo.

And this will the second, web app in turborepo, quite similar.

But both of them are running off of same build cache.

Impressive!!

Fourway

Turborepo provides 4 pathways to create the project:

Choose your learning path

1. Use create-turbo

   • Start with a template
   • This I have done just now.

2. Use an example

   • Start with a framework-specific example
   • https://turbo.build/repo/docs/getting-started/installation#start-with-an-example
   • Kitchen Sink example

3. Follow the in-depth guides

   • From zero to monorepo

4. Add to an existing repository

   • Make your current repo fast

The Kitchen Sink Project:

What’s inside?

This Turborepo includes the following packages and apps:

Apps and Packages

• api: an Express server

  • Running on port: http://localhost:5001/
  • Working API: http://localhost:5001/message/Atulya

• storefront: a Next.js app

  • Running on port: http://localhost:3002/
  • Contains a basic couter app

• admin: a Vite single page app

  • Running on port: http://localhost:3001/
  • Contains a basic couter app

• blog: a Remix blog

  • Running on port: http://localhost:5173/
  • Contains a basic couter app

• @repo/eslint-config: ESLint configurations used throughout the monorepo

• @repo/jest-presets: Jest configurations

• @repo/logger: isomorphic logger (a small wrapper around console.log)

• @repo/ui: a dummy React UI library (which contains <CounterButton> and <Link> components)

• @repo/typescript-config: tsconfig.json’s used throughout the monorepo

Each package and app is 100% TypeScript.

Let’s run it!

pnpm i

Seems like all the project’s output are all mixed up! Kitchen sinked I guess.

Okay 4 different apps are tested. I wonder how can I get segregated outputs.

There you go, in turbo.json file at root of the Turborepo

  "ui": "tui",

Add this ui key.

Well after going through some project from github, I got basic jist of Turborepo.

How to add new apps to Turborepo?

I don’t think there is much:

https://github.com/vercel/turborepo/discussions/243

https://github.com/vercel/turborepo/discussions/1036

Okay so creating a new apps seems a bit manually.