Monorepo setup with Lerna, TypeScript, Babel 7 and other — Part 3

Series

1. Basic monorepo setup with Lerna, Babel and TypeScript
2. Tslint, Stylelint, Jest, Storybook and Conventional Commit in the monorepo
3. First package development and publishing
4. Multiple packages and magic in TypeScript monorepo configuration

In the previous series we have configured monorepo with Lerna, Babel 7, Typescript for building and publishing packages, Jest for testing our code, Tslint and Stylelint for code quality checking and Storybook for components presenting. Now it’s time to create first simple package and publish it to the NPM registry.

First package

Let’s init first simple package which will be just Input with optional label for it:

and add react and styled-components as peerDependencies:

Development

Let’s create simple input with optional label:

Storybook

storybook is configured, so it's time to create first story and test first package as well as storybook and typescript integration. Just create Input.story.tsx inside input package.

and run yarn storybook. When the build process is finished, storybook will be accessible under http://localhost:6006

Testing

jest is configured and ready to be used. Let's create simple snapshot tests for our package:

All tests could be run with simple command:

Now we have a chance to check how our integration of jest and jest-styled-components works. Just open created snapshot and check that classnames are replaced with c0, c1, etc:

Build

It’s time to build our package. Simply run

and we should have packages/input/dist folder with all compiled files. The most important one is packages/input/dist/Input.js which has:

Publish

It’s time to publish our first package, just hit yarn release and answer Yes for publishing question. The result should be like:

Lerna says that package was published successfully. Now we could check it with yarn info or through web interface for our local npm registry (http://localhost:4873):

Moreover, lerna should create proper tags in our repository associated with released packages and versions:

Last, but not least, let’s check that proper Changelog was created for our package:

Now we have first package successfully released, what’s left? Second package which is dependant on our @taxi/input package is left. Integration with lerna would stay the same, simple as it is, however, it would requires some magic for making storybook, jest and tslint works with dependent packages and proper modules resolutions without rebuilding them all the time. Plus, as a bonus we'll generate types declarations for our packages and include them as a part of final build.

More details is HERE.