Skip to content

⚡ Frontend monorepo boilerplate. TypeScript, vanilla CSS/Tailwind/MUI with focus on best practices and painless developer experience.

License

Notifications You must be signed in to change notification settings

mkosir/frontend-monorepo-boilerplate

Repository files navigation

Frontend Monorepo Boilerplate TypeScript / Tailwind / Material UI

CI TypeScript semantic-release

Deployments - Prod / Stage / Storybook

CI CI CI

CI CI CI

CI CI

Frontend monorepo with focus on best practices and painless developer experience:

  • Monorepo setup that can be easily extended 🔧
  • Spin it up with single command 🌀
  • TypeScript 100% codebase
  • Blazing fast builds, lints, tests with Turborepo remote caching

Requirements

Running

Easily set up a local development environment

  • npm i
  • npm run build
  • npm run dev - Start all apps 🚀

Visit one of the monorepo apps localhost:3100

Features:

Commands

Bellow commands will be executed on monorepo level - on all apps and packages where npm script exists.

Command Description
prepare Setup git hooks with Husky (executes on npm install)
build Build all apps and packages (output build, dist)
dev Start all apps
lint Lint all apps and packages
lint-staged-husky Run prettier and lint on staged files
tsc Run TypeScript compiler
test Run tests on all apps and packages
storybook Start storybooks on all apps and packages
storybook-build Build all storybooks (output build-storybook)
format-lint Lint formatting with Prettier
format-fix Fix formatting with Prettier
clean Remove installed, generated and cached folders
remove-turbo-cache Removes Turborepo local cache
update-dependencies Update dependencies to their latest versions

Coding Guidelines

Convention over configuration should be followed as much as possible as described in TypeScript Style Guide.

TLDR:

  • Strive for data immutability.
  • Embrace const assertions.
  • Avoid type assertions.
  • Embrace discriminated unions.
  • Strive for functions to be pure, stateless and have single responsibility.
  • Majority of function arguments should be required (use optional sparingly).
  • Strong emphasis to keep naming conventions consistent and readable.
  • Use named exports.
  • Code is organized and grouped by feature. Collocate code as close as possible to where it's relevant.
  • UI components must only show derived state and send events, nothing more (no business logic).
  • Test business logic, not implementation details.

Monorepo

Monorepo features and conventions:

  • Monorepo is opinionated in order to achieve best developer experience. It's meant to be used as frontend only monorepo, 100% TypeScript, consistent codebase across whole monorepo with automated tooling in place as ESLint, Prettier, TypeScript, conventional commits etc.
  • Workspaces:
    • It comes with two workspaces apps and packages.
    • All configurations (eslint, jest, tailwind etc.) in packages are always prefixed with "config-" and imported into other workspaces directly from source without building (never transpiled).
    • All other packages beside configurations are always being built/transpiled to dist/ folder.
  • Merging to main branch deploys to stage environment, creating new GitHub release deploys to production.
  • Monorepo doesn't implement any high-level architectures (islands, micro-frontends), but is prepared with that in mind, so it can be easily extended (page composition, adding shared state etc.)