Back to list
ReactpnpmnpmSetupNode.js

[React][Setup] Initialize a Project and Dev Environment with pnpm

Install pnpm, learn the core commands, and set up a React or Next.js project faster with less disk waste than npm or yarn.

1. Environment

  • OS: Windows 11 / macOS
  • Platform: Node.js (v18 LTS or newer recommended)
  • Package managers: pnpm, npm, yarn
  • Terminal: PowerShell (Windows) / zsh (macOS)

2. Problem

When you build React.js or Next.js apps with npm or yarn, every new project creates another huge node_modules folder - often hundreds of megabytes.

Manage several projects and disk usage jumps by tens of gigabytes. Installing packages or bootstrapping a repo also means long waits every time.

3. Cause

npm and yarn copy dependency files onto disk for each project.

If ten projects use the same React version, your machine stores that same React tree ten times.

That duplication is the root cause of wasted disk space and slower installs.

4. Solution

1) Adopt pnpm (Performant npm)

pnpm keeps originals once in a global store and connects each project with hard links, so you save disk space and get much faster installs.

Install pnpm with npm

Windows (PowerShell / CMD, run as Administrator if needed):

npm install -g pnpm

macOS (Terminal / zsh):

# Use sudo if you hit an EACCES permission error
sudo npm install -g pnpm

# Or, if Homebrew is installed
brew install pnpm

You can also enable pnpm through Corepack: Enable pnpm with Corepack.

Then create projects quickly with pnpm (for example Vite + React + TypeScript): Create a React + Vite + TypeScript project.

2) Core pnpm commands

These work the same on Windows and macOS:

# 1. Install every dependency listed in package.json
pnpm install

# 2. Add a package to dependencies (production)
pnpm add [package-name]

# 3. Add a package to devDependencies
pnpm add [package-name] -D

# 4. Remove a package from the project
pnpm rm [package-name]

# 5. Update packages to newer versions
pnpm up

# 6. List packages that have updates available
pnpm outdated

3) Run a cloned project

After you git clone a repo from GitHub (or similar), set it up and start the app like this (Windows / macOS):

# 1. Install all dependencies (fast link-based install)
pnpm install

# 2. Start the development server (React, Next.js, Vite, etc.)
pnpm dev

5. Summary

pnpm fixes npm/yarn?’s disk waste and slow installs with a hard-link store model.

Whether you create a project or clone one with git clone, use pnpm install and pnpm dev to keep a fast, lean frontend workflow.

Related posts