AboutBlogProjectsTutorials

Building a monorepo

Tutorial — 5 parts

ReactNxPNPMVercel

Let's create a robust and developer friendly setup with multiple applications, shared libraries and code quality checks.

arrow_back All tutorials
Introduction
Description

A monorepo is a project composed of multiple applications and libraries within a single repository. Many teams use monorepos to help deal with shared dependencies, consistent tooling, easier code sharing, as well as developing and deploying individual applications independently.

In this tutorial, we will use modern tools like Vercel, PNPM, and Nx to build and deploy a multi-application monorepo.

We'll also cover the basic architecture, developer experience, various deployment options, and more!

Requirements
  • Prior experience setting up applications from scratch.
  • Prior experience working with shared code and dependencies.
  • Prior experience working with CI/CD pipelines.
What you'll learn
rocket How to set up a front-end monorepo architecture from scratch.
candy How to set up and enforce code quality checks across multiple applications.
party-popper How to build and deploy individual applications independently in a monorepo.
Structure

Part 1: Understanding the context

  • Understanding the context of large projects.
  • Highlighting common problems, struggles and challenges
  • Overview of a monorepo setup.

Part 2: Setting things up

  • Adding individual applications.
  • Adding shared libraries.
  • Connecting a build system.
  • Setting up a local development environment.

Part 3: Ensuring code quality

  • Ensuring consistent code formatting.
  • Adding a linter setup.
  • Adding tests.

Part 4: Building & deploying

  • Setting up independent projects in Vercel.
  • Adding required custom settings.
  • Deploying to production.

Part 5: Caching outputs

  • Overview of NX Cloud.
  • Setting up caching.
  • Debugging caching issues.