๐ฅ Monorepos in JavaScript/TS
Monorepos are a way to manage multiple projects under a single repository, enabling code sharing across all the projects.
Here's the breakdown of tools and mechanics:
1๏ธโฃ Workspaces
Workspaces (e.g. yarn workspaces) allow you to group multiple projects (apps/packages) within a monorepo. Typically, you'll organize them into:
๐ Apps: Standalone applications that use shared packages.
๐ Packages: Shared code that apps and even other package can depend on.
2๏ธโฃ Orchestration
Running commands across apps and packages can be challenging. Tools like Turborepo simplify this by orchestrating tasks, ensuring everything runs from a top-level.
3๏ธโฃ (Optional) Polyrepo
Want the flexibility of multiple repositories but the benefits of a monorepo? You can set up a "polyrepo in disguise", allowing you to distribute your projects across GitHub/GitLab/Bitbucket/... while maintaining a unified local structure.
You can either use .gitignore or git submodules for it.
4๏ธโฃ Decoupling with Versioning
Versioning in monorepos decouples apps from packages in their rigid local structure. It also allows one to release updates for packages without impacting all apps.
5๏ธโฃ Automating Versioning
With tools like Changesets, you can manage versioning either locally or through your CI/CD pipelines. The latter improves automation.
6๏ธโฃ Fallback Dependencies
Monorepos prioritize dependencies from local workspaces. If a dependency isn't found locally, it falls back to the registry (e.g. npm). This setup enables apps to depend on packages both inside and outside the monorepo.
Have questions or tips to share? Drop them below ๐ I did this whole setup for a freelance project of mine over the last 3 years.