55
loading...
Monorepos and Workspaces - an introduction
There are lots of other posts that dive into monorepos and their benefits and recommend reading them before diving into the tooling of one. Here is my quick tldr;
A monorepo is a single repository, that contains multiple loosely coupled packages within it. It differs from a monolith in that it usually has a focus on distributing individual packages, and saves time by allowing multiple changes that might usually need to be made across multiple repository's in a single repository and PR.
It's important to understand the challenges that monorepos present before diving into tooling and weighing up the best suite of tools for your use case.
The largest challenge people generally face with monorepos managing versions and deployments of packages. One scenario might be that you make a change in one component, bump the version and then want that version to propagate to all the other packages that might depend on it. This is of particular concern for breaking changes as you want to make sure you're not going to break anything for the end users.
Another challenge can be how to manage deployments, CI. Though a lot of CI tools have functionality to assist with this (e.g. Github Actions, CircleCI, you may need to think about whether you want to run your CI suite against a single package, or the whole repository, and if any automation might differ depending on the change.
As monorepos can get quite large, figuring out who is best suited for reviews and/or approvals can get a bit tricky. If you use github, adding a CODEOWNERS can help with automating this
The below tooling is a list of the most popular tools used for monorepos and managing workspaces. There is not necessarily a magic combination, but rather what works for you and your existing tooling. Not all of these tools are exclusive either, for example, yarn workspaces and lerna can be used together to create a more rich experience.
Most monorepos in the javascript ecosystem are built upon workspaces, a feature that is now readily available in most of the popular package managers. There isn't necessarily one that is better than the rest and generally follow a somewhat similar syntax pattern, but there may be one that your more comfortable with.
These are optional dependencies that are used to help with deployments, caching and linking packages. There is not necessarily a magic combination, but rather what works for you and your existing tooling.
One common use of monorepos is a design library. It allows for multiple publishable components and allows for users to import only what they need if desired, and encourages best practices for designing and creating your components by forcing them to be independent entities.
Example 1 - Chakra UI: https://github.com/chakra-ui/chakra-ui
Example 2 - Material UI: https://github.com/mui-org/material-ui
Example 2 - Material UI: https://github.com/mui-org/material-ui
Another common use case is that a product might have different available options that are made available to the end user, but don't necessarily fit within the core product. This could be using different build tools / versions, different variations of linting or packages that might only cater for specific use cases.
Example 1 - Storybook: https://github.com/storybookjs/storybook
Example 2 - OpenWC: https://github.com/open-wc/open-wc
Example 3 - Lit: https://github.com/lit/lit.dev
Example 2 - OpenWC: https://github.com/open-wc/open-wc
Example 3 - Lit: https://github.com/lit/lit.dev
[list] Awesome monorepo
Curated list of monorepo resources
Probably the best tools to develop and build your monorepo.
[blog] What is a monorepo
Monorepos can foster rapid development workflows. In this post, we’ll examine if they are the right fit for you and your company.
[blog] **Trying out npm and yarn workspaces
A practical walkthrough of npm vs yarn workspaces
55