Course

From PNPM Workspaces to Distributed CI

In this course, we'll walk through a step-by-step guide using the Tasker application as our example. Tasker is a task management app built with Next.js, structured as a PNPM workspace monorepo. The monorepo contains the Next.js application which is modularized into packages that handle data access via Prisma to a local DB, UI components, and more.

Throughout the course, we'll take incremental steps to enhance the monorepo:

  1. Adding Nx
  2. Configuring and fine-tuning local caching
  3. Defining task pipelines to ensure correct task execution order
  4. Optimizing CI configuration with remote caching
  5. Adjusting the current CI configuration to enable task distribution
  6. Splitting and parallelizing Playwright e2e tests to reduce execution time from 20 minutes to 9 minutes
Lessons
12

Lessons

  1. 01Initialize Nx in Your Project with nx init
  2. 02Run and Manage Tasks Efficiently Using Nx in a PNPM workspace
  3. 03Configure Nx Cache Outputs to Handle the .next Folder
  4. 04Create a Task Pipelines to Build Your Next app Before Serving it
  5. 05Link an e2e Project with Its Web App Through Implicit Dependencies with Nx
  6. 06Connect an Nx Workspace Workspace to Nx Cloud
  7. 07Use Nx to run commands on CI
  8. 08Enable read/write access to your Nx remote cache from CI
  9. 09Debug Remote Cache misses with Nx Cloud
  10. 10Enable Remote Caching for your Developer Machine with Nx Login
  11. 11Speed up CI by running tasks on multiple machines
  12. 12Run Playwright e2e Tests faster by Parallelizing Them on CI