I created a vite adapter for pagefind!

[Hugos68]

Hey there, I created a vite plugin for pagefind: https://github.com/Hugos68/vite-plugin-pagefind
This will help people that are using: Svelte, Vue, Qwik, Solid or any other Vite based project.
Wanted to share it but this honestly should probably be a package pagefind provides in the future, it does really make your life a lot easier.

This also solves #327 and partially solves #539.

[wentallout]

I tried it on my SvelteKit project. The search UI does show up and I can type in it. Only problem is that the url it navigates user to is wrong (404).

What I expect: http://localhost:3000/blog/perception-of-feedback-timing
What it produced: http://localhost:3000/pagefind/blog/perception-of-feedback-timing.html

my config

const pagefindConfig = {
	publicDir: 'static',
	buildDir: 'build'
};

[Hugos68]

Thanks for the feedback, I haven't used it with the UI, I will try and do the same as you did, there are still a few bugs with the plugin so I suggest you wait before using it, sorry for the inconvenience!

[Hugos68]

@wentallout I just tested pagefind locally and it all works correctly:

The preview URL does add .html which you have to remove since sveltekit handles routes a bit differently but that can be easily done by adding:

.replace('.html', '');

What version of the plugin are you running? I just pushed a update that fixed a pathing issue, I suspect you were victim of it, also, if you have any further questions please open up an issue on the vite-plugin-pagefind repo as this isn't so much related to pagefind anymore.

[bglw]

Awesome @Hugos68 ! ❤️

I'll move this to a discussion so we can keep it alive, and I'll get this onto the website's resources page 🔜 !

[Hugos68]

Awesome, thanks!

[ilkersigirci]

Awesome work, tried it and working perfectly. One question though, for pagefind to work with a static build site, I have to npm run dev && npm run build && npm run preview. Is there any way to avoid npm run dev part?

[Hugos68]

You should be able to run npm run build to generate build output + pagefind. npm run dev is not required, only for development.

[Hugos68]

FYI I've written an article about the issue and the solution: https://portfolio-2-70z.pages.dev/blog/pagefind-with-vite/

[Hugos68]

FYI I've now update the Vite Plugin with a major overhaul allowing much more flexible configurations.