Typescript Style Guide

Overview

The Turborepo / Next.js / TypeScript boilerplate is an opinionated frontend monorepo that focuses on best practices and providing a painless developer experience. It includes a range of features such as a remote cache build system, support for TypeScript codebase, Next.js apps, UI component packages, testing with Jest, linting with ESLint, and more.

Features

• Turborepo v1 remote cache build system: Allows for fast execution of commands (build, lint, test, etc.) on your local machine and CI.
• TypeScript v4 codebase with Strict Configuration: Provides the benefits of TypeScript, ensuring type safety and improving code quality.
• NextJs apps: Includes a set of Next.js applications for building modern web applications.
• UI component packages: Offers three separate packages (Vanilla CSS, MUI v5, Tailwind v3) with respective configurations. These can be easily imported into the Next.js apps for building custom UI components.
• Unit and integration tests with Jest: Allows for writing and running tests for all apps and packages.
• Linting with ESLint: Provides automatic code linting to catch potential errors and enforce code style conventions.
• Prettier code formatter: Includes Prettier for consistent code formatting across the project.
• Git hooks with Husky and lint-staged: Sets up git hooks to run commands (such as linting) before commits and ensures commit messages meet conventional commit format.
• Commitizen: Simplifies the process of creating commit messages that follow the conventional commits format.

Installation

To set up the Turborepo / Next.js / TypeScript boilerplate, follow these steps:

1. Make sure you have Node.js v18+ installed.
2. Run npm install in the project directory to install all dependencies.
3. Start the local development environment by running npm run dev.
4. Visit one of the monorepo apps at localhost:3100.

To execute various commands, use the following scripts available at the monorepo level:

• prepare: Sets up git hooks with Husky (executes on npm install).
• build: Builds all apps and packages.
• dev: Starts all apps.
• lint: Lints all apps and packages.
• lint-stage-husky: Runs lint-staged on every commit.
• tsc: Runs TypeScript compiler.
• test: Runs tests on all apps and packages.
• storybook: Starts storybooks on all apps and packages.
• format-lint: Lints formatting with Prettier.
• format-fix: Fixes formatting with Prettier.
• commit: Runs Commitizen on staged file.
• clean: Removes installed, generated, and cached folders (node_modules, coverage, .next, etc.).
• update-dependencies: Updates dependencies to their latest versions.

Summary

The Turborepo / Next.js / TypeScript boilerplate is a comprehensive frontend monorepo that provides a structured and efficient development environment. It includes essential features such as remote cache build system, TypeScript support, Next.js apps, UI component packages, testing, linting, and code formatting. With easy setup and convenient scripts, this boilerplate is designed to promote best practices and deliver a seamless developer experience.