Member-only story
How to Setup a JavaScript Monorepo Like a Professional
It’s not as hard as you might think
I have traditionally hated ESLint, Babel, Prettier, and the like. Don’t get me wrong, they are fantastic tools; it’s simply a nightmare to navigate setting up a new project with a conglomeration of these tools.
Last weekend I dug into the muck of how to bootstrap a decent JavaScript Monorepo, complete with code linting enforcement, testing support, and a decent build process.
If you’re like me at all, you’ve used Create React App for most of your prior React projects. It handles a lot for you, and it’s really quite good. But, what if you want to create a larger library using multiple distinct packages? What if you want tighter control over repository rules and scripts? Or just wanted to get the experience of setting up your own React environment from scratch? The answer to my query was Lerna, a convenient JS monorepo management tool.
I’d checked it out before, but I remember discounting the tool since it seemed all was well in my multi-repo project at the time. Now, at the tail end of this year-long project, I am wishing we’d applied some tighter control over code management and utilized Lerna.
So, here are some basics on how to set up a repository using Lerna, which will set you up for success down the road as your development process evolves.
Create a Fresh Repository
Navigate to your profile in GitHub, or BitBucket (or what-have-you), and create a new repository. Then clone it with trusty old git clone <url> . Or, create a new folder with yarn init and cd into that. Don’t forget to add your .gitignore file. Here’s the simple one I’m using for this example project:
For reference, I’ve uploaded the completed boilerplate set up as a public GitHub repository on my profile, so we can see the final result of this guide.
