Turborepo Template

This repository provides a monorepo setup for web frontend development (React 18, Next.js 14, Chrome extension)

Commands

The following commands are available:

pnpm build       # Build the projects for production
pnpm dev         # Start the development server
pnpm lint        # Lint the JavaScript/TypeScript files (not apply changes)
pnpm lint:fix    # Lint the JavaScript/TypeScript files (apply changes)
pnpm test        # Run the unit test
pnpm test:watch  # Run the unit test in watch mode
pnpm test:ui     # Run the unit test with UI
pnpm test:e2e    # Run the end-to-end tests
pnpm test:e2e:ui # Run the end-to-end tests with UI
pnpm serve       # Serve the production build locally for previewing
pnpm clean       # Remove node_modules and generated files (e.g., build artifacts, cache)
pnpm format      # Format the JavaScript/TypeScript files using Biome and other files using Prettier.
pnpm generate    # Generate a component from templates with plop

For disabling cache, you can use:

[!NOTE] Note that this disables reading the cache, not writing.

pnpm build --force

Additional filter options for running specific tasks:

pnpm dev --filter @repo/storybook # --filter or -F

DevTools

This repository utilizes the following tools:

tool	description
turbo	Monorepo build system that speeds up and optimizes the development process
pnpm	Fast, disk space efficient package manager
biome	Linter for JavaScript, TypeScript, and JSON files
prettier	Formatter for various file types (JavaScript, TypeScript, Markdown, etc.)
lefthook	Tool for managing Git hooks easily
plop	Micro-generator framework that helps create consistent project components
vitest	Testing framework for unit testing
playwright	Testing framework for e2e testing
commitlint	Linter for git commit messages to ensure they follow a consistent format

Repositories

apps

apps contains web applications that depend only on packages within the packages directory, not on other applications.

repo	description
next	Next.js 14 (App Router) application with Tailwind CSS
react	React 18 application using Vite for bundling and Tailwind CSS
react-chrome	Chrome Extension built with React 18, using CRX, Vite and Tailwind CSS
storybook	Storybook setup for managing UI components and their development.

packages

packages contains utilities and components shared across applications.

repo	description
pkg-tsup	Template for creating npm packages using Tsup as the bundler
pkg-vite	Template for creating npm packages using Vite as the bundler
ui	Shared UI components library used across applications

configs

configs contains configuration files shared across applications and packages.

repo	description
tailwind	Tailwind CSS configuration shared across applications
typescript	TypeScript configuration shared across applications
constants	Common constants and configuration settings used across applications and packages