Deploying to Cloudflare Pages using PNPM
In my local machine, I use PNPM as the package management. However, Cloudflare doesn’t support it out of the box (here is the list).
Here’s how I get around it.
- Build command:
npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build
- Production variables:
Build command uses
npx to run
pnpm i and store package cache separately from
npm. Then use
npx to run
pnpm run build to build the side. I left the build output directory as
Node 16 is the latest LTS version that Cloudflare Pages supports. Node 17 is supported by CF; but somehow it is no longer LTS. I am still trying to dig out why it is short-lived 🤣 - looks like Node versions are made LTS every two version.
npm to run.
3.7, just because I want to. Well, more that it’s because the out-of-the-box version is 2.7 😱. The latest supported version is 3.7 and exactly 3.7.
This is what I got when trying Python 3.7.16.
/opt/build/bin/run-build-functions.sh: line 168: /opt/buildhome/python3.7.16/bin/activate: No such file or directory
Flashing dark/light mode
Once I deployed it Cloudflare Pages, the background flashed when navigating between pages. So were the font faces and styles.
Better for the speed(?); worse for the my eyes 😎.
The fix is to set an attribute
/public/toggle-theme.js so Rocket Loader will not defer loading the switch.
data-cfasync attribute must be put before
<script data-cfasync="false" is:inline src="/toggle-theme.js"></script>
Viola. Happy days.