I. What is Turborepo?
- Turborepo is a
- 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.jsonconfig. 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:
- Consistency – Easily share Business logic, UI modules, documentation through shared packages.
- Visibility – Everyone (developers) using the codebase can easily read the code, improve communication, and share when working cross-team.
- Build and Development Caching – Turborepo allows to build only on packages with source changes (similar to Nx).
- Single source of truth – Ensure the source code is always up to date, eliminating the situation of teams working with
outdated legacy codeof other teams.
- A single CI/CD pipeline – No need to deploy CI/CD on each application, we can handle CI/CD in a single place.
- 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.
- Remote Caching – see more
- Simple Config – As I said above, all configs are in the file
III. Create a project with Turborepo
- At the terminal, type:
npx [email protected]
y-> enter to continue:
- Enter a name for your project in the next step:
- 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:
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
- The apps folder is where our main projects are located. By default, 2 projects are created in
- Folder Packages will store shared resources for code reuse in the project
webabove. 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
Okay, now we start the application with the command:
pnpm dev . When standing at root, we will start 2 project
web . If you want to run a separate project, go to the correct directory of that project and run it.
The two projects created will run on 2 ports 3000 and 3001.
In the code of these 2 pages, we will see the
Boop button imported from the package
We can use the same Button component from shared packages. At this point, everyone can move on.
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.
Thank you for reading.