/learning-lerna

learning lerna to create a component library as a monorepo

Primary LanguageJavaScript

lerna Commitizen friendly Storybook

Learning Lerna

Using this repo to learn lerna for managing a component library as a monorepo.

Getting Started

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/

Npm Scripts

👀 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)

Creating new packages

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.

Development

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.

Resources