https://github.com/davebitter/fe-monorepo

This repository is build up by multiple steps translated in the following articles on https://techhub.iodigital.com which are part of the series https://techhub.iodigital.com/series/how-do-i-build-a-component-library.
https://github.com/davebitter/fe-monorepo

components eslint husky jest lit monorepo prettier storybook stylelint web webcomponents workspaces yarn

Last synced: 10 days ago
JSON representation

This repository is build up by multiple steps translated in the following articles on https://techhub.iodigital.com which are part of the series https://techhub.iodigital.com/series/how-do-i-build-a-component-library.

• Host: GitHub
• URL: https://github.com/davebitter/fe-monorepo
• Owner: DaveBitter
• Created: 2022-07-06T06:57:57.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-24T15:07:59.000Z (over 2 years ago)
• Last Synced: 2025-02-04T17:50:37.297Z (16 days ago)
• Topics: components, eslint, husky, jest, lit, monorepo, prettier, storybook, stylelint, web, webcomponents, workspaces, yarn
• Language: TypeScript
• Homepage: https://fe-monorepo.davebitter.com
• Size: 736 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# FE monorepo

[![Netlify Status](https://api.netlify.com/api/v1/badges/f1e7fff1-c7c9-4fb2-a243-057c565484bd/deploy-status)](https://app.netlify.com/sites/fe-monorepo/deploys)

![abstract artwork for series](./docs/how-do-i-build-a-component-library.png)

**FE monorepo is a component library build to showcase how you can set up a monorepo architecture for your next component library.**

This repository is build up by multiple steps translated in the following articles on the [iO TechHub](https://techhub.iodigital.com) which are part of the series [How do I build a Component Library?](https://techhub.iodigital.com/series/how-do-i-build-a-component-library):

## [How do I set up a monorepo, SemVer strategy and private package registry?](https://techhub.iodigital.com/articles/how-do-i-build-a-component-library/monorepo-semver-package-registry)

![abstract artwork for monorepo](./docs/monorepo-semver-package-registry.png)

- **Yarn Workspaces** - used to help with dependency management

- **Changeset** - used to help with SemVer

- **GitHub package registry** - used to publish versioned packages to be installed through NPM

## [How do I pick a front-end framework & showcase it with Storybook?](https://techhub.iodigital.com/articles/how-do-i-build-a-component-library/front-end-framework-storybook)

![abstract artwork for fe framework and storybook](./docs/front-end-framework-storybook.png)

- **Lit Element** - used as the front-end framework of choice

- **Storybook** - used to document components

## [How do I set up linting, unit, snapshot and visual regression testing?](https://techhub.iodigital.com/articles/how-do-i-build-a-component-library/linting-testing)

![abstract artwork for unit, snapshot and visual regression](./docs/linting-testing.png)

- **ESLint** - used as linter for TS and JS files

- **Stylelint** - used as linter for CSS files

- **Prettier** - used as formatter for all files

- **Import sorts** - used to sort and group import statements

- **Manypkg** - used tokeep dependencies in sync and sorted

- **Jest** - used as test runner

- **Husky** - used as pre-commit hook to kick off linting, testing and formatting

- **lint-staged** - used to only lint staged files

- **commitizen** - used as way to enforce a commit style

- **Storyshots** - used for snapshot testing

- **Imageshots** - used for visual regression testing

## [How do I setup CI/CD & hosting?](https://techhub.iodigital.com/articles/how-do-i-build-a-component-library/ci-cd-hosting)

![abstract artwork for ci/cd and hosting](./docs/ci-cd-hosting.png)

- **GitHub actions** - used for CI/CD

- **Netlify** - used to host Storybook build