component-frontend-blueprint

This project was bootstrapped with ci-cd-frontend-blueprint.

Structure

This repo was built with step-by-step commits, so if you read through CHANGELOG.md (on master branch) each commit describing a new feature, so it should be easy to reproduce.

Features 🚀

• The main aim of this project to provide a kick-starter template for creating React based libraries. It's NOT using Create React App, because it's an exploded setup. Feel free to modify according to your needs.

• Build process ⚙️:

  • Babel + Webpack in charge for building the lib.
  • TypeScript also introduced via Babel (kudos to this article)
  • tsc is also there to provide auto-generated declarations (*.d.ts files) to the build

• Storybook to have a nice preview of what components we're having in our lib.

• CI/CD workflows via Github Actions

  • Semantic release is ensuring every time a develop -> master merge happens we auto-generate a CHANGELOG.md and also updating the package.json with the correct version number.
  • For each master release an npm package published to Github Packages

• Continous delivery to Surge.sh platform for Storybook live previews

  • develop -> component-frontend-blueprint-staging.surge.sh
  • master -> component-frontend-blueprint.surge.sh

• Quality gates are ensured through

  • Commitlint to ensure consistent commit messages (also supporting Sem. Ver.)
  • Eslint to support linting TypeScript files. Why eslint? See here
  • Prettier to auto-format through a pre-commit hook so we can avoid debates on code styling :)