This repository provides a monorepo setup for web frontend development (React 18, Next.js 14, Chrome extension)
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 plopFor disabling cache, you can use:
Note
Note that this disables reading the cache, not writing.
pnpm build --forceAdditional filter options for running specific tasks:
pnpm dev --filter @repo/storybook # --filter or -FThis 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 |
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 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 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 |