Code Loading Lesson

MDX Powered Lesson

Codesandbox Embed Lesson

Replit Embed Lesson

Getting Oriented

Initial setup for pnpm and Node version management

How pnpm organizes node_modules

Configuring pnpm peer dependencies and hoisting

Setting up a pnpm workspace monorepo

Production vs development dependencies

Dependency version ranges and protocols

Patching dependencies with pnpm

Introduction

Adding a formatter with Prettier

Sharing TypeScript configuration

Shared ESLint configuration for ESLint 8 and 9

VSCode ESLint extension hoisting workaround

Shared testing configuration with Jest and Vitest

Shared config

Automated git hooks with Lefthook

Pre-commit formatting with pretty-quick

Benchmarking and speeding up pre-commit hooks

Finding unused dependencies with Knip

Should Knip run in pre-commit?

Enforcing monorepo dependency consistency with Sherif

Per-workspace pre-commit checks with Lefthook

Tools and techniques for managing and automating tasks within a monorepo

Monorepo management and automation tools

CommonJS vs ESM in Node

Node.js package.json exports

How TypeScript Picks an exports Condition

Sharing UI code by exporting TypeScript

When exporting TypeScript breaks (and how to fix it)

Adding Preconstruct to Our Monorepo

Preconstruct for logger and automatic dev symlinks

Explore Node.js fundamentals and TypeScript build tools essential for effective monorepo management.

Understanding Node fundamentals and TypeScript build tools in a Monorepo

Module 05 — CI/CD

Adding a basic GitHub Actions CI workflow

CI concurrency and push triggers

Extracting a composite GitHub Action for pnpm and Node

Running Sherif in CI without pnpm install

Splitting CI into multiple fast checks

Pinning GitHub Actions by full SHA

Adding workflow_dispatch

Building a single workspace with Docker

Explore strategies and tools for implementing continuous integration and deployment in monorepo environments.

Continuous Integration and Deployment in Monorepos

Initial Turborepo setup

Build and start with Turborepo

Turbo transit tasks

Workspace-specific turbo config

Environment variables in Turborepo

Custom inputs and global dependencies

Workaround for turbo cache symlink bug

Learn how to use Turborepo for efficient monorepo management, including caching, parallel builds, and task orchestration.

Turborepo

( the primaryDescriptionMarkdown is long - several lines, include images, as long as you want )

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>. 

In <the length of these lessons> we cover <three salient points about what we cover. Your BEST points>. Its <however long it is> and comes with <these bonus features, and reasons to buy. code, etc.>

It's taught by <author name> who <credibility, reason you should listen to them>. <social proof, if you have it yet>

<then you can list other supporting stuff you want to add, anything you want here>

-------
Example:
-------

We created a free course to create your first GraphQL server (from scratch) using Node and TypeScript. TypeScript and GraphQL are a powerful combo, but there's a lot of confusing edges if you're getting it setup the first time.

In this course we cover the basics of getting TypeScript setup with Node, how GraphQL works, and how to set up a GraphQL server using Apollo server. It's two hours long, it comes with complete code examples, and we walk through the code step-by-step.

It's taught by my friend, Shopify-engineer Hassan Djirdeh and he's integrated what he's learned using GraphQL in production as an engineer at Shopify. We've already had over 1,300 students enroll and it's been getting great reviews so far.

// ... and so on

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>. 

( the summary is short - one or two lines )

Bundling and Automation in Monorepos

Crossing the package boundary makes things complicated.

We must understand how publishing an npm module works in order to make better decisions for our internal modules.

Shape of exports in a published package (complicated!)

{
  /* old style --------------------------------------------------------------- */
  "module": "./dist/index.legacy-esm.mjs",
  "main": "./dist/index.cjs",
  "types": "./dist/index.d.ts",

  "exports": {
    /* ensure best compatability by exposing package.json to importing packages */
    "./package.json": "./package.json",

    /* conditional exports ---------------------------------------------------- */
    "module-sync": "./dist/index.mjs",
    "module": "./dist/index.mjs",
    "import": "./dist/index.mjs",
    "default": "./dist/index.cjs",

    /* with TypeScript ------------------------------------------------------- */
    ".": {
      "module-sync": {
        "types": "./dist/index.mjs.d.ts",
        "default": "./dist/index.mjs",
      },
      "module": {
        "types": "./dist/index.mjs.d.ts",
        "default": "./dist/index.mjs",
      },
      "browser": {
        "import": {
          "types": "./dist/index.mjs.d.ts",
          "default": "./dist/index.browser.mjs",
        },
        "default": {
          "types": "./dist/index.cjs.d.ts",
          "default": "./dist/index.browser.cjs",
        },
      },
      "import": {
        "types": "./dist/index.mjs.d.ts",
        "default": "./dist/index.mjs",
      },
      "default": {
        "types": "./dist/index.cjs.d.ts",
        "default": "./dist/index.cjs",
      },
    },

    /* additional entry point ------------------------------------------------- */
    "./calculator": {
      "module-sync": {
        "types": "./dist/calculator.mjs.d.ts",
        "default": "./dist/calculator.mjs",
      },
      "module": {
        "types": "./dist/calculator.mjs.d.ts",
        "default": "./dist/calculator.mjs",
      },
      "import": {
        "types": "./dist/calculator.mjs.d.ts",
        "default": "./dist/calculator.mjs",
      },
      "default": {
        "types": "./dist/calculator.cjs.d.ts",
        "default": "./dist/calculator.cjs",
      },
    },
  },
}

# Node.js package.json exports

Crossing the package boundary makes things complicated.

## Why care about `exports`?

We must understand how publishing an npm module works in order to make better decisions for our internal modules.

-   The `exports` field superseceds the historic `main` (CJS) and `module` (ESM) fields
-   Allow the definition of multiple entry points into a package.
-   Hide all files not explicitly `export`-ed, making them private to the package.
-   Serve different module systems and build environments through export conditions.
-   Export conditions is the cannonical way to publish CJS + ESM packages on NPM

## Quick refresher on CJS vs ESM in Node.js

| ESM (`import`)                       | CJS (`require`)                        |
| ------------------------------------ | -------------------------------------- |
| `.mjs` or `.js` when `type:"module"` | `.cjs` or `.js` when `type:"commonjs"` |
| Top‑level `await` allowed            | Synchronous loader, no TLA             |
| `import`s are statically parsed      | `require()` is a normal function       |

## Shape of exports in a published package (complicated!)

```jsonc
{
  /* old style --------------------------------------------------------------- */
  "module": "./dist/index.legacy-esm.mjs",
  "main": "./dist/index.cjs",
  "types": "./dist/index.d.ts",

  "exports": {
    /* ensure best compatability by exposing package.json to importing packages */
    "./package.json": "./package.json",

    /* conditional exports ---------------------------------------------------- */
    "module-sync": "./dist/index.mjs",
    "module": "./dist/index.mjs",
    "import": "./dist/index.mjs",
    "default": "./dist/index.cjs",

    /* with TypeScript ------------------------------------------------------- */
    ".": {
      "module-sync": {
        "types": "./dist/index.mjs.d.ts",
        "default": "./dist/index.mjs",
      },
      "module": {
        "types": "./dist/index.mjs.d.ts",
        "default": "./dist/index.mjs",
      },
      "browser": {
        "import": {
          "types": "./dist/index.mjs.d.ts",
          "default": "./dist/index.browser.mjs",
        },
        "default": {
          "types": "./dist/index.cjs.d.ts",
          "default": "./dist/index.browser.cjs",
        },
      },
      "import": {
        "types": "./dist/index.mjs.d.ts",
        "default": "./dist/index.mjs",
      },
      "default": {
        "types": "./dist/index.cjs.d.ts",
        "default": "./dist/index.cjs",
      },
    },

    /* additional entry point ------------------------------------------------- */
    "./calculator": {
      "module-sync": {
        "types": "./dist/calculator.mjs.d.ts",
        "default": "./dist/calculator.mjs",
      },
      "module": {
        "types": "./dist/calculator.mjs.d.ts",
        "default": "./dist/calculator.mjs",
      },
      "import": {
        "types": "./dist/calculator.mjs.d.ts",
        "default": "./dist/calculator.mjs",
      },
      "default": {
        "types": "./dist/calculator.cjs.d.ts",
        "default": "./dist/calculator.cjs",
      },
    },
  },
}
```

Ivan Tanev