Tuesday, July 14, 2020

a lerna learner, standing up a monorepo from existing repo/packages

Earlier I talked about our use of verdaccio so each developer can trivially stand up their own npm repo. At work we are heading towards a "monorepo" model, with one overarching project and github repository. This should not be confused with a "monolithic architecture": each project is about as standalone (or dependent on others as an npm package as always) as always, but lerna makes it easier to manage versioning 0 and to update a library and quickly start using the changes in a dependent package without the old version update tango... as I put it to one coworker:
w/o monorepo, a dev making a change in a library and seeing it work in the app using it was:
  • update the code in the library
  • update the version of the library
  • publish library to npm
  • update the app so it knows of the new version of the library
  • rebuild the app
But now that's like:
  • update code in library
  • run lerna command to rebuild
and that's it!
For my first example, I went to make a new monorepo called "one-love" to encompass two previously existing packages - ux-poc-stylish-app and the component library prototype it depends on, ux-poc-stylish-components.

Things were pretty well set out at lerna.js.org-
npm install --global lerna
is the obvious first step

Next steps:

git init one-love
cd one-love
lerna init

At this point I had to set up the git repo - I'm not positive you have to stand up the remote on github, but it seemed to help (It's funny how often I turn back to my git 101 notes - it's not like the steps are that hard...) Without standing up the repo, you get somewhat obscure errors like 

lerna publish:Error: Command failed: git rev-parse --abbrev-ref HEAD fatal: ambiguous argument 'HEAD': unknown revision or path not in the working tree

With the basic git repository I could use lerna import, bring in repos from my local file system:

cd packages
lerna import ../../ux-stylish/ux-poc-stylish-app 
lerna import ../../ux-stylish/ux-poc-stylish-components 
cd ..
lerna bootstrap --hoist

The "--hoist" argument was crucial, but not mentioned much in the main lerna docs.

So then in one terminal window I went to ux-poc-stylish-app and ran npm start. (It had been set up from create-react-app so changes to the core app were instantly visible) 

I updated a component in ux-poc-stylish-components, and then back in main one-love directory I ran "lerna run build" which replaced running "npm run build" in the library. ux-poc-stylish-app then noticed the change in the underlying library and rebuilt and reloaded itself.

UPDATE: javascript-monorepo-with-lerna is another decent overview, but starting packages/from scratch not importing.

UPDATE 2: fair warning, if you're using verdaccio and npm, your package-lock.json might be full of localhost:4873 ... they say npm is now agnostic about which registry you used to generate the package-lock.json but I'm not sure if that means the hosts in the URL don't matter??

No comments:

Post a Comment