Lernajs/yarn workspaces with an aurelia application

I’m also starting with Lerna and in my case this Lerna project will be vanilla JS stuff, I also based my project a lot on the Aurelia 2 Lerna model. I had a similar question in Discourse couple weeks ago, in this post. I’m using the yarn workspace and I took you do also, but remember that it will create 1 main node_modules in the root, so you want to make sure that your Lerna project doesn’t mix and match too many stuff because you end up with a big node_modules, like in my case I was thinking to add Angular and Aurelia packages but end up not doing that because it’s not good practice and they don’t have anything common, instead I’ll keep 2 separate npm lib for Angular & Aurelia that will use the lerna one (which is all vanilla js).

All that to say that in my case, I have scripts in Lerna to do the Bootstrap (does all the symlink) then do a first TSC Build so that all other Packages have the code and the intellisense to work too. So in each package, I have a build script that does TSC Build and in the lerna package.json I call that build script with Lerna and by doing so it calls all the build. I then have dev:watch script that run in parallel, but that is where the biggest issue is, they run in parallel so because of that it is required to run the build at least once so all the code is ready and available by all other packages, then only after you can run the dev:watch script which like I said runs in parallel. For Unit Testing I use Jest and got that working too and even setup CircleCI, for the most part I took the config from my Aurelia-Slickgrid lib.

Another challenging thing I had was to get VSCode debugger to work, that was quite a task but eventually got it all working with one lauch.json file in the root (notice the sourceMapPathOverrides that will have to be updated every time you add a new package).

For reference, you can take a look at my slickgrid-universal lerna project. For now there are only 3 packages (2 of which that will later be used externally and 1 just for demo and troubleshooting purposes). I will add more packages in the future and once this project is all done and ready, I will rewrite Angular-Slickgrid and Aurelia-Slickgrid to use that core lerna project and have 1 main place to change code instead of having to change code in both framework when I do fixes currently.

Here’s also an article I found with Lerna and Yarn Workspace, it was written for a React project but still not bad to read.

2 Likes