Logo

SudoVersity

SudoMistress
Feb 19, 2025

Astro 5+, Pagefind, and Vercel

A site I have been working on is built in Astro, runs on Vercel, has API endpoints to handle all kinds of various fun tasks, and I wanted to use Pagefind for search for content on the site.

The problem

I really wanted to use the results while building in dev.

My solution

As I am using the Vercel adapter, I made a change to my package.json file.

CODE
"dev": "astro dev",
"build": "astro build && pagefind --site .vercel/output/static && cp -r .vercel/output/static/pagefind public/",
"preview": "astro preview",
"astro": "astro",
"build:local": "pnpm run clean:pagefind && pnpm run build",
"clean:pagefind": "rm -rf public/pagefind"

What it does

When I run pnpm build:local any pagefind directory in Astro’s public file is removed, and then the build process is run.

WARNING

Note that I have used rm -rf. Please be careful with this command if you want to replicate the way I have done this.

The pnpm build script runs the build, then Pagefind on the Vercel adapter created outputs, then copies over the pagefind directory to Astro’s public folder giving me everything I need to test the search results in PageFind.