Using pnpm with Netlify
Quick note: if you want to use pnpm in your Netlify deploy, you can’t point npm at / to disable it. After the next time you clear your cache, it will try to install the modules and fail because of insufficient permissions. Rather, you need to use --prefix /dev/null.
I had to update my technique for a more recent project where I was surprised to learn Netlify still doesn’t support pnpm directly or offer any way to disable all the unnecessary dependency management. This hack disables the builtin npm install behaviour:
TOML[build.environment]
NPM_FLAGS="--version"
This installs the dependencies and builds the project using pnpm:
TOML[build]
command = "npx pnpm@6 install --store-dir=.pnpm --frozen-lockfile && npx pnpm@6 build"
Note the --store-dir=.pnpm
to allow caching dependencies.
The normal method of using the cache plugin would be:
TOML# this does not work
[[plugins]]
package = "netlify-plugin-cache"
[plugins.inputs]
paths = [".pnpm"]
Unfortunately, disabling npm install means Netlify has no way to fetch the plugin in the first place, which it expects to be able to do before running the build command. I ended up having to use a Git submodule for the first time.[1] The netlify.toml can point at this ‘vendored’ version instead:
TOML[[plugins]]
package = "/netlify-plugin-cache"
[plugins.inputs]
paths = [".pnpm"]
In the end, caching dependencies (and some image processing too, now that I had set it up) took the build time for this project from around six minutes to one and a half, so it was well worth the effort.
- I’ve started down this route many times in the past only to realize I have better options.↩