Add PNPM to Pre-installed Cloudflare Pages tools

PNPM, a popular package manager for JavaScript, is not available as a pre-installed tool on Cloudflare pages. PNPM, while smaller than NPM or Yarn, still has >10k Stars on GitHub and many websites use it. It would be helpful for many people who use PNPM, and it would help speed up the website compiling process when deploying to Cloudflare Pages.

This is something I personally am very invested to see. If there was an easy workaround I wouldn’t mind but I haven’t been able to get it going so far.

1 Like

Hi, I managed to find a quite clean workaround. You wrap your pnpm package in a simple metapackage that requires just pnpm. and inside it you have the actual app package, which contains all your code. Scheme is more than words:

repo
├── code
│  ├── package.json
│  ├── pnpm-lock.yaml
│  └── src-or-wherever-you-have-your-code
│     └── your-code-here.js
├── package-lock.json
├── package.json
└── README.md

Now you can work in the ‘inner’ package most of the time, and the outer package.json looks like this:

{
  "devDependencies": {
    "pnpm": "^6.18.0"
  },
  "scripts": {
    "build": "pnpm -C code install && pnpm -C code build"
  }
}

In Cloudflare config, use npm run build (which, as you can see above, runs pnpm with the option to work in the code directory) as build command, and specify code/<output dir> as output directory. Don’t set the root directory, keep it at /.

The only drawback here is that the dependencies installed by pnpm aren’t cached by the CF build pipeline. For my package with the following dependencies, install takes 7 seconds, so it isn’t that bad.

@sveltejs/adapter-static 1.0.0-next.21
@typescript-eslint/parser 4.33.0
eslint-plugin-svelte3 3.2.1
svelte 3.44.0
tslib 2.3.1
@sveltejs/kit 1.0.0-next.188
eslint 7.32.0
prettier 2.4.1
svelte-check 2.2.7
typescript 4.4.4
@typescript-eslint/eslint-plugin 4.33.0
eslint-config-prettier 8.3.0
prettier-plugin-svelte 2.4.0
svelte-preprocess 4.9.8

Hope this helps!

1 Like

This is my workaround.
Just set build command to npm install -g pnpm && pnpm i && pnpm build

2 Likes

I’ve managed to find a clean solution based on Vite’s Netlify config, which works here too.

  1. Set environment variable NPM_FLAGS = --version to skip the npm install phase.
  2. Set build command to npx pnpm i --store=node_modules/.pnpm-store && npm run build so pnpm’s store is cached too.
9 Likes

It works btw but I need to set PYTHON_VERSION=3.7 because while building I got a node-gyp error because the installed python version is older than the requirement.

Does CF Pages have something similar to the netlify.toml file? I can’t find it easily in the docs. Thanks.