Getting Started with Monorepo

In my previous post, I covered my quest to build a shareable component library, using Vue 3. In this post, I will cover taking the current library and turning it into a Monorepo that can handle multiple libraries with Lerna.

Prep the Repo

1. We will need npm i --global lerna for this.

2. Add workspaces.
   • Lerna prefers if you use workspaces, and npm makes that pretty simple. Suppose we want 2 packages in this repo. Run npm init -w ./packages/main and npm init -w ./packages/bravo(pick any names you like).
   • This will create a new folder /packages, but also register the workspaces in your package.json file.

3. In package.json change this:

To this:

4. If you are continuing from where we started, it’s time to move your src folder into the package(s).
   • Additionally, you will want to move the following files from your root to the package/name folder.

5. Copy contents of your package.json file.
   • You can copy everything. Feel free to keep the name, and you can remove the entry for workspaces. It should look like the original package.json file otherwise.

6. Update root/package.json for Lerna.
   • The root package.json file is now here just for Lerna, so this is the new content:

7. Initialize Lerna (will add lerna.json). This step will fail if you don’t have workplaces or if you have two package.json files that specify the same name.
   • lerna init

8. Make sure all dependencies are installed.
   • npm install
   • A lot of folders and config files have moved, just to be safe.

9. Run the first full build. For simplicity, I would simply add the contents from packages\main to packages\bravo, and change the name in the package.json file. It can all be the same right now, but we can’t build without having all directories working.
   • Run npm run build in the root folder.

Note: You have a package.json file in the root folder AND in each packages folder, you have different npm run commands in each location, so be aware of where you are running. Also know that you can run each command to verify that the individual projects are working.

10. To use the packages you created, you can install the locally exactly like we did before with npm install <path to library>/packages/name.
    • If you don’t have a package.json file inside that directory, you did something wrong.

And that’s it! If you want to add more packages, you can just add more workspaces and fill in the package files like above.

Chris Niemann Sr. Software Engineer

Chris joined Don’t Panic Labs right after he finished playing college basketball and has been learning from his colleagues about the depth of programming since. It turns out that there are a lot of things that college doesn’t teach you about what it means to be a good software engineer. Most days you will find him in the office, but he also likes to stay close to coffee shops when he is writing code.

See Full Bio