5 resources to get your Monorepo off the ground
Tags: webdev, tutorial, javascript, react
Published: 2022-04-01 09:24:15

Monorepos are a great emerging software tool which helps us organize and maintain our projects.
In the past few months some of my articles were dedicated to this subject - how to bootstrap them, what tools to use, techniques etc, and I thought that these scattered articles should be bundled into a single resource where you can find it all in one place.

This made me go with the post you’re about to read - I will gather all the recent resources I’ve written dealing with Monorepos, give a short description on what each covers and link to it, of course. I believe you (and probably the future me) will find this resource something worth keeping in the bookmarks. 

Let’s begin
***
## [No BS monorepo - Part 1](https://dev.to/mbarzeev/no-bs-monorepo-part-1-3c3a)
This is the first part, out of 2 articles, to get you started building your monorepo using [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) and [Lerna](https://github.com/lerna/lerna). I called my monorepo “[pedalboard](https://github.com/mbarzeev/pedalboard)” (as in guitar effects) since it is going to hold many packages, each much like an effect pedal will have its own purpose and uniqueness. 
In the end of this post you will have a single package under the monorepo which can be version-bumped locally. No NPM publishing yet.
It touches areas such as Yarn Workspaces configuration, running tests in a monorepo, Lerna configuration, bumping versions through conventional commits and more.

Link: https://dev.to/mbarzeev/no-bs-monorepo-part-1-3c3a 

***
## [No BS monorepo - Part 2](https://dev.to/mbarzeev/no-bs-monorepo-part-2-3im2)
The second part of bootstrapping your own monorepo. This is where things get more interesting :)
In this one I used [GitHub actions](https://github.com/features/actions) along with Lerna to publish the packages to NPM automatically once all tests have passed. This makes working with the monorepo so much pleasant, since you have an automated task taking care of all the dirty work of bumping versions, tagging and publishing to NPM.
It touches areas such as configuring GitHub action, obtaining and using tokens for GitHub secrets, publishing through Lerna, setting a publishing bot user and more.

Link: https://dev.to/mbarzeev/no-bs-monorepo-part-2-3im2

***
## [Adding a React Components Package to a Monorepo](https://dev.to/mbarzeev/adding-a-react-components-package-to-a-monorepo-3ol5)
Now this is more for the Frontend devs out there. In this article I attempt to add a React component package to my “pedalboard” monorepo. By the end of this post, your React component package will be set and ready to be published on NPM with any modification merged to it.
As a part of it I also introduced Storybook and ESlint for React to the package. I also tackled an issue with multi version bumping on packages which did not change.
It touches areas such as Storybook and ESlint configuration in a monorepo and a bit of .yaml with git commands magic for the GitHub actions.

Link: https://dev.to/mbarzeev/adding-a-react-components-package-to-a-monorepo-3ol5 

***
## [Aggregating Unit Test Coverage for All Monorepo’s Packages](https://dev.to/mbarzeev/aggregating-unit-test-coverage-for-all-monorepos-packages-20c6)
This one is one of my favorites in the monorepo series. In this one I’m attempting to aggregate the unit test coverage reports for the different packages within the monorepo. The requirements are straightforward:
Have unit test coverage for all the packages under the monorepo, make the report easy on the eye, kinda like nyc's HTML coverage report and have it easy to generate. By the end of this post you will have it all.
This article touches areas such as NodeJS scripting, generating an aggregated directory of results, invoking nyc’s reporting of it and more. Pretty cool :)

Link: https://dev.to/mbarzeev/aggregating-unit-test-coverage-for-all-monorepos-packages-20c6

***
## [Hybrid NPM package through TypeScript Compiler (TSC)](https://dev.to/mbarzeev/hybrid-npm-package-through-typescript-compiler-tsc-150c)
One of the challenges of any package maker is having your package support different module formats (ESM, CJS, UMD). In this article I attempted to support different module formats, ESM and CJS, for a package using TypeScript Compiler (TSC) capabilities, and thus making it hybrid. The candidate was my [@pedalboard/hooks](https://github.com/mbarzeev/pedalboard/tree/master/packages/hooks) package. 
This article touches areas such as introducing a build step into the publishing flow, TypeScript compiler configuration and configuration inheritance, package.json tricks and more.

LInk: https://dev.to/mbarzeev/hybrid-npm-package-through-typescript-compiler-tsc-150c

***
## Still more…
These 5 articles will give you a good start to building your own monorepo. The work does not stop here though. I have more related topics that are waiting for me to dive in, so be sure to stay tuned :)
As always if you have any comments or questions be sure to share them with the rest of us.

Have a great one!

*Hey! If you liked what you've just read check out <a href="https://twitter.com/mattibarzeev?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">@mattibarzeev</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> on Twitter* :beers:

<small><small><small>Photo by <a href="https://unsplash.com/@joannakosinska?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joanna Kosinska</a> on <a href="https://unsplash.com/s/photos/bundle?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></small></small></small>