DEV Community

Cover image for Monorepo with PNPM workspace
anasrin
anasrin

Posted on • Originally published at anasrar.github.io

2

Monorepo with PNPM workspace

Monorepo ?

Monorepo is single repository with many project or packages (library or modules), you can reuse code as package.

en.wikipedia.org/wiki/Monorepo has good explaination for Monorepo including advantages and disadvantages.

Monorepo structure

Monorepo with PNPM workspace

PNPM only need pnpm-workspace.yaml on your root repository alongside packages.json, with array path to directory in packages property.

packages:
    - "apps/*" # support glob pattern
    - "packages/*"
Enter fullscreen mode Exit fullscreen mode
monorepo-example/
├─ apps/
├─ packages/
├─ package.json
└─ pnpm-workspace.yaml
Enter fullscreen mode Exit fullscreen mode

NOTE: apps/* and packages/* is very popular monorepo structure, where apps/* is projects directory and packages/* is reusable code.

All you need just create directory inside packages list, change directory to it, and do pnpm init.

mkdir -p packages/math-lib
cd packages/math-lib
pnpm init
cd ../..
mkdir -p apps/calculator
cd apps/calculator
pnpm init
cd ../..
Enter fullscreen mode Exit fullscreen mode

List all workspaces

List all workspaces in JSON format.

pnpm m ls --depth -1 --json
Enter fullscreen mode Exit fullscreen mode

Command specific workspace

Run command on specific workspace using flag --filter following with name in package.json.

# Format
pnpm --filter <workspace> <command>
pnpm -F <workspace> <command> # short alias
# Example
pnpm --filter math-lib add lodash
pnpm --filter math-lib add -D typescript @types/lodash
pnpm --filter calculator run test
# Support glob pattern
pnpm --filter pkg* run test
Enter fullscreen mode Exit fullscreen mode

NOTE: PNPM use name property in package.json to filter workspace, so make sure ever name in package.json is unique.

Add local dependency

Add local dependency using flag --workspace to only adds the new dependency if it is found in the workspace.

# Example
pnpm --filter calculator add math-lib --workspace
Enter fullscreen mode Exit fullscreen mode

Project example

mkdir -p monorepo-example
cd monorepo-example
pnpm init
mkdir -p packages/math-lib
cd packages/math-lib
pnpm init
cd ../..
mkdir -p apps/calculator
cd apps/calculator
pnpm init
cd ../..
touch packages/math-lib/index.js
touch apps/calculator/index.js
Enter fullscreen mode Exit fullscreen mode
// packages/math-lib/index.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = {
  add,
  subtract,
};
Enter fullscreen mode Exit fullscreen mode
// apps/calculator/index.js
const { add, subtract } = require("math-lib");

console.log(`9 + 10 = ${add(9, 10)}`);
console.log(`26 - 9 = ${subtract(26, 9)}`);
Enter fullscreen mode Exit fullscreen mode
pnpm --filter calculator add math-lib --workspace
Enter fullscreen mode Exit fullscreen mode
// apps/calculator/package.json
{
  "scripts": {
    "start": "node index.js"
  }
}
Enter fullscreen mode Exit fullscreen mode
// package.json
{
  "scripts": {
    "calculator:start": "pnpm -F calculator run start"
  }
}
Enter fullscreen mode Exit fullscreen mode
pnpm run calculator:start
Enter fullscreen mode Exit fullscreen mode

output calculator run start

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs