Stripe
TypeScript Monorepos: Architect Maintainable Codebases
4 hours, 19 minutes
CC
Course Description
Make even the largest monorepos feel fast and light! Go from monolith to monorepo as you refactor a codebase with Learna and Nx. Centralize ESLint, tsconfig, and testing configurations for consistency. Unify dependency version across packages and spot dead code and unused exports. Gain hands-on experience with modern tooling from the TypeScript monorepo ecosystem.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: September 12, 2025
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 250+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 17 minutes
Mike North introduces course by discussing the benefits of Monorepos, like simplified dependency management and easier testing across packages. He also outlines what the course will cover, including setting up a Monorepo, linking packages, running dependency-aware tasks, defining boundaries, and generating documentation with tools like pnpm and lerna.
Mike introduces the course project, a minimal Svelte and Node app that will be refactored into a monorepo to demonstrate package linking and dependency-aware task execution. He also covers tools for managing API boundaries, generating docs, syncing code ownership, and keeping packages clean and consistent.
Mike answers student questions regarding the relationship between monorepos and micro front end architecture, using monorepos for creating libraries, and using TurboRepo compared to NX. Mike also touches on using pnpm for enterprise projects and shares insights on indicators for choosing between monorepos and poly repos based on package interrelatedness and tooling needs.
Setup
Section Duration: 20 minutes
Mike highlights the importance of using pnpm for the course, covers installation, project setup, running tasks, and verifying everything works. He also explains integrating multi-language packages in a monorepo and stresses identifying separable app components before transitioning.
Mike demonstrates setting up a new package in a monorepo by creating a folder, moving code, configuring package JSON, adding scripts, and preserving git history. He highlights pnpm for its readable lock files and smooth restructuring.
Extracting Server
Section Duration: 55 minutes
Mike shows how to refactor a UI package into multiple monorepo packages, starting with low-dependency modules like models. He covers file moves, package setup, dependency management, and build scripts to improve structure and maintainability.
Mike walks through setting up TypeScript configurations for type checking and building processes. Mike also highlights structuring TS configs consistently across the monorepo for efficient development and compilation processes.
Mike discusses integrating models into the UI codebase by updating the package.json file to specify dependencies within a monorepo using pnpm. Mike also discusses strategies like using project references to optimize TypeScript performance in large monorepos.
Mike demonstrates breaking and factoring out from the UI package into a server package, resulting in three packages: models, server, and UI. The process involves organizing folder structures, moving code and tests, setting up package JSON, handling dependencies, and ensuring a working build process with pnpm.
Managing Dependencies & Code Formatting
Section Duration: 1 hour, 28 minutes
Mike covers tools like manypkg for linting and maintaining consistency in package manifests, helping detect issues such as incorrect dependencies and missing fields.
Mike discusses detecting variants in versions of external dependencies in packages, using syncpack. The tool can identify multiple versions of a package in a monorepo, allowing for better management and synchronization.
Mike walks through implementing linting and code formatting across the repository. He also demonstrates moving Prettier to the project root for consistent code style application across packages, creating a script for monorepo-level formatting.
Mike demonstrates moving ESLint configurations to the root level, adjusting TypeScript configurations, and resolving import resolution issues to make ESLint work effectively across the workspace. Mike also discusses enabling jump-to-definition functionality by including declaration maps in the TypeScript build configuration.
Mike explains how to identify and eliminate unused exports from modules and dependencies in a JavaScript project using the tool Knip. Knip aids in maintaining a clean codebase by automating the detection and removal of dead code, which may not be addressed by traditional tree shaking techniques.
Mike demonstrates the process of getting the dev script working again in the project. He also demonstrates modifying the package.json files to set up a dev script using the concurrently package to run multiple commands concurrently.
Mike explains how TypeScript Project References boost build performance by enabling incremental compiling at the module level, reducing work for updates.
API & Monorepo Tools
Section Duration: 1 hour, 1 minute
Mike installs and configures Microsoft’s API Extractor to generate a consolidated DTS file and API report, covering setup, linting, and running the tool for accurate type documentation.
Mike discusses utilizing an API report, such as a markdown file, to clearly visualize changes in a library's exposed API surface.
Mike uses API Documenter in the models package to generate markdown docs from code comments and types, making it easy to browse and track changes in VSCode.
Mike explains how Lerna simplifies managing monorepo dependencies and tasks like build, test, and lint, especially when combined with pnpm and Nx for faster, cached, and parallelized task execution.
Mike demonstrates how to test only affected parts of a project using the dependency graph, making testing faster and more efficient in a growing monorepo.
Mike explains how to use Nx to manage tasks like testing and building efficiently, highlighting task sequencing, caching, and how remote caching can speed up PR and developer builds.
Mike shows how to install Nx and run build targets with pnpm exec, highlighting the speed of Nx and Turbo Build caching. He also explains why Nx is better suited than pnpm alone for managing tasks and dependencies in a monorepo.
Wrapping Up
Section Duration: 16 minutes
Mike wraps up by answering questions on monorepo structure, overriding Nx cloud for task caching, evaluating tools like Zod and Arctype, building Nx generators, and switching to pnpm at scale.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops