Modern Monorepo with Turborepo. Start with a basic project from Turborepo

Tram Ho

I. What is Turborepo?

  • Turborepo is a fast build system built for JavaScript/Typescript monorepos projects – Codebase includes projects (from many different libraries/frameworks) that use the same business logic, utils,…
  • Monorepos have a lot of advantages, but implementation is quite complicated. Turborepo is different, they provide tooling and solutions, reducing the complexity of configurations, scripts, tooling into a turbo.json config. What’s more, Turborepo is easy to integrate into existing codebases without too much effort.

II. Why choose Turborepo

To answer this question, let’s go through a few advantages that Turborepo brings:

  1. Consistency – Easily share Business logic, UI modules, documentation through shared packages.
  2. Visibility – Everyone (developers) using the codebase can easily read the code, improve communication, and share when working cross-team.
  3. Build and Development Caching – Turborepo allows to build only on packages with source changes (similar to Nx).
  4. Single source of truth – Ensure the source code is always up to date, eliminating the situation of teams working with outdated legacy code of other teams.
  5. A single CI/CD pipeline – No need to deploy CI/CD on each application, we can handle CI/CD in a single place.
  6. Remove deduplicated packages in node modules – Packages in node modules of applications are always computed and unneeded packages are removed from the codebase. Save a lot of resources and build time.
  7. Remote Caching – see more
  8. Simple Config – As I said above, all configs are in the file turbo.json

III. Create a project with Turborepo

  • At the terminal, type: npx [email protected]
  • Type y -> enter to continue: image.png
  • Enter a name for your project in the next step: image.png
  • Select the desired package manager (in this demo I choose pnpm) and enter to continue
  • The voltage is stable, the project has been created with the following structure: image.png

IV. Run the application created above

I will briefly talk about the structure and function of the files/folders included in the source setup first image.png

  • The apps folder is where our main projects are located. By default, 2 projects are created in docs and web (using Reactjs).
  • Folder Packages will store shared resources for code reuse in the project docs and web above. Usually Business logic, UI modules, utilities, or eslint/tsconfig/tailwind scripts…
  • In the root codebase, there will be other config files. And the most important is still the file turbo.json

Okay, now we start the application with the command: pnpm dev . When standing at root, we will start 2 project docs and web . If you want to run a separate project, go to the correct directory of that project and run it. image.png

The two projects created will run on 2 ports 3000 and 3001. image.png

In the code of these 2 pages, we will see the Boop button imported from the package ui image.png

We can use the same Button component from shared packages. At this point, everyone can move on.

V. End

Besides the above advantages, Turborepo also has many disadvantages such as increasing the size of the source -> reducing the speed of the IDE. Takes time for initial outreach. image.png Moreover, if compared to other build systems like Nx or Lerna , Turbo is still not comparable in terms of build speed as well as a modest user community. But with the acquisition by Vercel (also the developer for NextJs), we can completely believe in a future for Turborepo. ^^

Thank you for reading.

BECAUSE. References

Share the news now

Source : Viblo