Skip to main content

Introduction

This template provides a scalable, modular foundation for medium to large frontend projects. It is built to support multiple applications and shared packages within a unified monorepo, promoting consistent tooling, efficient builds, and smooth collaboration across teams. Its modular architecture also makes it well-suited for micro frontend development, where multiple independently deployable apps can coexist in a single codebase.

Prerequisites​

Before getting started, ensure the following requirements are met:

  • Node.js version 22.20 or higher (as specified in .nvmrc)
  • pnpm for dependency management
  • Docker (optional, for containerising the application)

Workspace​

The monorepo follows a clear structure with dedicated directories for frontend applications and shared libraries.

repo/
├── apps/
│   ├── web/                   # React application (Vite + TypeScript)
│   └── web-e2e/               # E2E testing suite (Playwright)
│
├── packages/
│   ├── eslint-config/         # Shared ESLint configurations
│   ├── shared/                # Shared React library (components + utilities)
│   └── typescript-config/     # Shared TypeScript configurations
│
├── package.json               # Root workspace configuration
├── turbo.json                 # Turborepo configuration
└── pnpm-workspace.yaml        # pnpm workspace definition

All applications and packages use shared ESLint and TypeScript configurations to ensure consistency across the monorepo.

apps/web​

A React application built with Vite and TypeScript, providing a fast development experience and optimised production builds. Key features include:

apps/web-e2e​

An end-to-end testing suite built with Playwright and TypeScript, ensuring reliable cross-browser testing for the web application. Key features include:

  • Playwright for cross-browser testing with automated CI/CD support
  • Pre-commit checks with lint-staged to maintain code quality
  • Direct integration with the main web app for seamless testing workflows

packages/shared​

A shared React component library built with Vite and TypeScript, providing reusable components and utilities across the monorepo. Key features include:

Tooling​

Essential development tools are configured at the root for consistency and automation across all workspaces:

  • Turborepo for managing builds, caching, and running tasks in parallel across the monorepo
  • Husky for Git hooks to enforce pre-commit checks and automate quality controls
  • Prettier for consistent code formatting across the entire codebase
  • Docker for containerising apps via a shared root Dockerfile and nginx configuration
  • GitHub Actions for CI/CD, running builds, unit tests, and end-to-end tests on pushes to main and on pull requests