Using this repo to learn lerna for managing a component library as a monorepo.
Make sure you have git
and nvm
(node version manager) before starting.
git clone git@github.com:hellobrian/learning-lerna.git <your-monorepo-name>
cd <your-monorepo-name>
nvm install && nvm use
npm ci
npm run bootstrap
npm run dev
After running npm run dev
, navigate to Storybook at: http://localhost:6006/
👀 For a full list of npm scripts, see ./package.json
npm/npx script | description |
---|---|
npm run bootstrap |
bootstrap the project with lerna |
npm run dev |
run dev environment (storybook + bili) |
npm run create |
create boilerplate for a new package/component in packages directory |
npx lerna add icon --scope=button |
install local packages (install icon in button) |
Create a new package with npm run create
assumes you are creating a new React component. Once scaffolding is done, you can customize the component structure as needed.
Components are built with:
- React (
*.js
) - CSS Modules (
*.scss
) - Storybook (
*.stories.js
)
Also note:
- Components are built out to ESM only. (CJS and UMD later if needed).
- Builds are done via bili.js, which is pre-configured rollup.
All develpment is done through storybook.
The trick here is that each *.stories.js
file will import build/index.esm.js
.
From the root directory, we can run npm run dev
script and storybook will update and rebuild the packages while you make changes to files in src
.
- https://areknawo.com/full-blown-monorepo-setup-walkthrough/
- 🔴 Setup a monorepo with Lerna 🐉 - chantastic
- Running bili/rollup --watch with lerna
- Release management in Angular with Lerna (commitizen)