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.

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