DEV Community

Cover image for Monorepo with PNPM workspace
anasrin
anasrin

Posted on • Originally published at anasrar.github.io

Monorepo with PNPM workspace

#javascript #node #pnpm #monorepo

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

Top comments (0)

Read next

geraldhamiltonwicks profile image

5 Essential Software Metrics for Quality Assurance

Gerald Hamilton Wicks -

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -

hkp22 profile image

JavaScript Memory Management and Optimization Techniques for Large-Scale Applications

Harish Kumar -

rverwey profile image

My First JavaScript Web App: Interactive Image Coordinate Finder

Ryan VerWey -