amanix007 / turborepo-boilerplate

⚡ Frontend Turborepo boilerplate. TypeScript v5, Next.js v13 and Material UI with focus on best practices and painless developer experience.

Turborepo / Next.js / TypeScript / Material UI boilerplate

Deployments - prod/stage/storybook

Opinionated frontend monorepo with focus on best practices and painless developer experience:

• Monorepo setup can be easily extended with custom libraries or into micro-frontend architecture 🔧
• Spin it up with single command 🌀
• Blazing fast builds with Turborepo remote caching ⚡
• TypeScript 100% codebase

Requirements

• Node v18+

Running

Easily set up a local development environment

• npm install
• npm run build
• npm run dev - Start all NextJs apps 🚀

Visit one of the monorepo apps localhost:3100

Features:

• Turborepo v1 remote cache build system, with blazingly fast execution of commands (build, lint, test etc.) on your local machine and CI
• TypeScript v5 codebase with Strict Configuration
• NextJs v13 apps
• Material UI component library built with MUI v5 and shared theme across all apps and packages
• Unit and integration tests with Jest and React Testing Library. Run a single test in any monorepo app/package instantly.
• Linting with ESLint
• Prettier code formatter
• Git hooks with Husky and lint-staged
• Commit messages must meet conventional commits format.
  After staging changes just run npm run commit and get instant feedback on your commit message formatting and be prompted for required fields by Commitizen

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 (build-next-static, 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 (build-storybook-static)
format-lint	Lint formatting with Prettier
format-fix	Fix formatting with Prettier
commit	Run Commitizen on staged file
clean	Remove installed, generated and cached folders (node_modules, coverage, .next etc.)
remove-turbo-cache	Removes Turborepo local cache
update-dependencies	Update dependencies to their latest versions

Conventions

Convention over configuration should be followed as much as possible as described in Conventions.md

Monorepo

Monorepo features and conventions:

• Monorepo is being quite highly opinionated in order to achieve best developer experience. It's meant to be used as frontend only monorepo, 100% TypeScript, Material UI support (UI component library, shared theme across all apps and packages etc.), 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, material ui 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 and output to dist/ folder.
• All applications in monorepo are built with Next.js.
• All Next.js applications are statically exported.
• Monorepo doesn't include any implementation of micro-frontend architecture, but is prepared with that in mind, so it can be easily extended (adding shared state, page composition etc.)