2024/05/06/bootstrapping-lerna-monorepo

[utterances-bot]

Bootstrapping a Lerna Monorepo

So far, all the front-end development work I’ve done has been in the repo I created when bootstrapping Vite. It’s starting to feel a little restrictive.

https://www.thecandidstartup.org/2024/05/06/bootstrapping-lerna-monorepo.html

[ghiscoding]

Hello, so on top of being a SlickGrid maintainer, I also maintain Lerna-Lite which is a lighter and more modular version of Lerna (I created the fork couple months before Nrwl/Nx took over Lerna, and if I had known then I probably wouldn't have created Lerna-Lite). It's lighter and doesn't use Nx at all (on the contrary, the new Lerna does requires Nx behind the scene and it's not surprising since Nrwl is Nx, so...). Anyway, you may want to check it out if you want a lighter Lerna-Lite...

For the workspace, I would suggest you use pnpm workspace: protocol, pnpm or yarn workspaces are a lot better than the regular npm workspaces. I also suggest you use TypeScript References (tsc -b) with composite, that approach is much faster to build since it's a centralized build with path references of each package. I made the switch with that approach in this Slickgrid-Universal [PR}(https://github.com/ghiscoding/slickgrid-universal) and saw an impressive decrease in build time of 5x (in the PR, you'll also see the changes that I had to do). Also in Slickgrid-Universal I do use Vite, TypeScript and Lerna-Lite, so if you wanted a demo of all that, then you'll find it there and since you already know about SlickGrid, it should be pretty familiar to you.

Cheers

[timwiegand]

Thanks for the feedback. I'll have a look at these alternatives if I run into problems with the tooling I'm currently using. At the moment builds are effectively instant, so I'm able to prioritize minimal developer friction.

With my current TypeScript setup you can sync the repo and the IDE is fully functional ("go to definition" and similar work cross-package), unit tests run, and the Vite development server works.

With TypeScript project references you have to build first to generate declaration files for each package. I've been spoilt by the Vite experience where I can fix a bug in a package component, save the file and have my unit tests rerun automatically and my running sample app from a separate workspace automatically update itself.

[ghiscoding]

With TypeScript project references you have to build first to generate declaration files for each package. I've been spoilt by the Vite experience where I can fix a bug in a package component, save the file and have my unit tests rerun automatically and my running sample app from a separate workspace automatically update itself.

Well if you find the correct way to do that with Vite in a workspace environment, I'd be interested to know because at this point I use lerna watch that I added in Lerna-Lite. With the watch, I call a rebuild which is differential so it's pretty quick and the rest follows and it's pretty much good, but the main problem that I have is that when the project is blank and doesn't have anything in dist, the Vite demo breaks, so to fix this use case, I have to run a prebuild and then run the watch. I would gladly remove this prebuild if I could find the correct setup with Vite + Workspace (someone had similar issue in this Vite Discussion and there's no real answer yet sadly, so a prebuild is the current hack that I have and it works except this extra start time)

[timwiegand]

I don't know if it's "correct" but the solution I use is the path aliases described in this post. Works with nothing in dist, straight off the TypeScript source code spread across multiple workspaces.

When the time comes to do a production build the path aliases aren't used and cross-package references use dependent package dist as you'd expect.

[ghiscoding]

I don't know if it's "correct" but the solution I use is the path aliases described in this post. Works with nothing in dist, straight off the TypeScript source code spread across multiple workspaces.

which article? would you mind sharing the change?

[timwiegand]

which article?

This one! The one with these comments on it. There's an overview of TypeScript path aliases and a detailed description of how I setup my tsconfig files. You'll also need the vite-tsconfig-paths plugin for the Vite development server to pick up the path aliases.

This is the repo where I have all this setup: https://github.com/TheCandidStartup/infinisheet.