Skip to content

Hy-Vee/lerna-yarn-workspaces-monorepo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

12 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Monorepo with Lerna & Yarn Workspaces

A Monorepo with multiple packages and a shared build, test, and release process.

View example โžก๏ธ https://storybook-monorepo.now.sh/

image

  • ๐Ÿ‰ Lerna โ€Š- The Monorepo manager
  • ๐Ÿ“ฆ Yarn Workspacesโ€Š - โ€ŠSane multi-package management
  • ๐Ÿš€ Reactโ€Š - โ€ŠJavaScript library for user interfaces
  • ๐Ÿ’… styled-componentsโ€Š -โ€Š CSS in JS elegance
  • ๐Ÿ›  Babelโ€Š - โ€ŠCompiles next-gen JavaScript
  • ๐Ÿ“– Storybook - UI Component Environment
  • ๐Ÿƒ Jestโ€Š -โ€Š Unit/Snapshot Testing

Usage

  • yarn dev - This starts Storybook for viewing all the components locally.
  • yarn bootstrap - This installs all of the packages and links dependent packages together.
  • yarn build - This babelfies all of the packages and creates /lib folders for each one.
  • yarn test - Run all linting and unit tests before committing.
  • yarn test -o - Run only the tests that have changed.
  • yarn test -u - Update all of the snapshot tests.

Lerna

  • lerna changed - Show which packages have changed.
  • lerna diff - Show specifically what files have cause the packages to change.

Linking

When linking inside of the Monorepo, everything works as expected. If you are trying to consume packages from this Monorepo in a different application locally, using npm link or yarn link does not work as expected. However, we have a workaround for the time being.

  1. Run yarn build
  2. Run yarn dev
  3. Change the package.json of the consumer from $YOUR_PACKAGE_NAME (which lives inside the monorepo) to file:./../monorepo/packages/$YOUR_PACKAGE_NAME
  4. Run rm -rf node_modules && yarn in the consumer
  5. ๐ŸŽ‰

Contributing

All formatting and linting should be taken care of for you using stylelint, ESLint, and Prettier. You should also consider installing an extension for CSS syntax highlighting.

FAQ

Why the limitation on yarn versions?

It's a known issue that yarn workspaces using yarn versions > 1.18.0 can produce the following false positive error message when adding or updating dependencies in packages.

error An unexpected error occurred: "expected workspace package to exist for "XXX".

To guard against this, we've:

  • Changed package.json to enforce a yarn version range.
  • Added a .yvmrc file, so if you're using yvm to manage your yarn versions (like nvm for node version), it'll pick up the yarn version automatically.