While working on a project, I was assigned the task of re-organizing the frontend code into a monorepo. The codebase consists of two frontend apps, the customer portal and the admin panel, along with backend and infrastructure code.
First, it looked to me that it was already a mono-repo but then I learned that there is another concept called code colocation. We often see this pattern followed in organizations where in a single repository we have distinct folders for backend code, frontend code and infra related configs.
What do you call it ? A monorepo OR a code co-location
It's code colocation. Yes!
Monorepo is not just code colocation, it’s more than that. Let’s define it in simple terms:
A monorepo is a single repository containing multiple distinct projects, with well-defined relationships.
So, a repository containing the codebase of several projects without division and relationships among them, then it’s just a big repo. For a monorepo to exist, there should be a well-defined relationship among them.
You can read more about monorepos, why its exists and its features, and the tools available to make monorepos development easier
How I setup it
I used yarn workspaces for the base structure of monorepo. It works on the concept of workspaces. Workspaces are the building blocks of monorepo. Each app and package we add in our monorepo is a workspace and managed by package manager.
For improving the DX (Developer Experience) and handling maintenance overhead, I use Turborepo, a powerful build system optimized for Javascript and Typescript.
It helps us in speeding up the development both on the local machine and CI/CD by providing:
- Local computation caching
- Distributed task execution
- and many more!
