Overview

The Frontend Monorepo Boilerplate is a TypeScript-based development setup that focuses on best practices and provides a seamless developer experience. It allows for easy extension and comes with several key features such as Turborepo remote caching, Next.js apps, multiple styling solutions, component libraries, testing with Jest and React Testing Library, linting with ESLint, and git hooks with Husky. The monorepo can be set up with a single command and provides a local development environment for easy code building and testing.

Features

• Turborepo v1 remote cache build system: Enables blazingly fast execution of commands (build, lint, test, etc.) on your local machine and CI.
• TypeScript v5 codebase: The entire codebase is written in TypeScript with configurations for strict type checking and styling.
• Next.js v13 apps: The monorepo includes Next.js apps for building powerful web applications.
• Multiple styling solutions: Includes three styling solutions with a shared theme across all apps. Choose between Vanilla CSS, Tailwind components library built with Tailwind v3, and Material UI components library built with MUI v5.
• Easily import UI components package into apps: Allows for easy import of UI component packages into apps for seamless integration.
• Unit and integration tests with Jest and React Testing Library: Run tests for individual apps or packages instantly.
• Linting with ESLint: Ensures code quality and adherence to coding standards.
• Prettier code formatter: Provides consistent code formatting for improved readability.
• Git hooks with Husky and lint-staged: Automatically runs linting and formatting scripts before committing changes, ensuring code consistency.
• Conventional commits format: Enforces the use of conventional commit messages with instant feedback and prompts for required fields.
• Various commands: The monorepo includes several convenient npm commands for tasks like setting up git hooks, building apps, starting apps, linting, testing, and more.

Installation

To install the Frontend Monorepo Boilerplate, follow these steps:

1. Ensure you have Node v18+ installed.
2. Clone the repository to your local machine.
3. Navigate to the cloned repository directory in your terminal.
4. Run the following command to set up the local development environment:

npm install

5. Once the installation is complete, build the apps by running:

npm run build

6. Start all apps using the following command:

npm run dev

7. Visit localhost:3100 in your browser to access one of the monorepo apps.

Summary

The Frontend Monorepo Boilerplate provides a comprehensive development setup for building web applications. With its focus on best practices and developer experience, it offers features like remote caching, TypeScript codebase, Next.js apps, multiple styling solutions, component libraries, testing, linting, git hooks, and conventional commits. By following the installation guide, developers can quickly set up a local development environment and start building applications with ease.