Implementing Full-Text Search with Remix and PageFind

This presentation explores how to add powerful full-text search functionality to Remix applications using PageFind, an open-source search library. It covers the implementation of Japanese-language search in Remix Docs, explains the indexing and search processes, and highlights the benefits of client-side search using Remix's clientLoader. The talk also touches on the growing Remix ecosystem and potential job opportunities for Remix developers in Japan.

Transcript

1. Remix + Pagefind Remix "ワインと鍋" Meetup Press Space for next page Remix Docs Japanese with free full-text search functionality.
2. coji Love the things that are very useful and simple to use, made by a small group of people Remix Conform DuckDB Turso Also love tech talks. I decided to name my own company TechTalk inc. A web developer based on Tokyo, Japan.
3. Remix Docs Japanese https://github.com/coji/remix-docs-ja Tech Stacks Remix v2.9.2 (single fetch) Fly.io + Cloudflare Cache Markdown based Translated using Gemini 1.5 Flash A website I maintained to help my Japanese co-workers learn and understand the "Remix way".
4. Full-text Search Functionality
5. Pagefind https://pagefind.app Open source library written in Rust Multilingual and Japanese support out of the box Provides a NodeJS indexing API and browser-based search API, along with a CLI and default UI Provides search functionality for websites with minimal bandwidth and no infrastructure.
6. How Full-text search works
7. Indexing When building the app, also perform index building simultaneously. const { index } = await pagefind.createIndex({}) await index.addCustomRecord({ content: doc.html, meta: { title: doc.attributes.title.toString() }, language: 'ja', url: pathname }) await index.writeFiles({ outputPath: 'public/pagefind' }) const buildIndex = async () => { const docs = await glob('docs/**/*.md') for (const filename of docs) { const { dir, name } = path.parse(filename) const pathname = path.join('/', path.basename(dir), name) const doc = await getDoc(pathname) } } await buildIndex()
8. Indexing (cont.) vite.config.ts pagefind.js must be removed from the bundle by specifying external in rollupOptions. build: { rollupOptions: { external: ['/pagefind/pagefind.js?url'] } }, export default defineConfig({ plugins: [ remix({ future: { v3_fetcherPersist: true, v3_relativeSplatPath: true, v3_throwAbortReason: true, unstable_singleFetch: true, }, }), tsconfigPaths(), ], })
9. Search Form clientLoader clientLoader: Execute searches solely on the browser side. It also works in SPA mode. <fetcher.Form action="/resources/search"> <Input id="query" name="q" placeholder="Search..." /> <Button size="sm">Search</Button> </fetcher.Form> const pagefind = (await import( '/pagefind/pagefind.js?url' )) as unknown as Pagefind await pagefind.init() const ret = await pagefind.search(url.searchParams.get('q')) return { results } export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => { const url = new URL(request.url) const results = await Promise.all(ret.results.map((result) => result.data())) }
10. Conclusion Pagefind is a free, open-source search library that supports Japanese out of the box No server-side infrastructure is required, and search processing can be completed entirely in the browser, significantly reducing operational costs By leveraging Remix’s clientLoader, you can seamlessly implement client-side search It’s an ideal solution for adding full-text search to Markdown-based documentation I recommend to try building a user-friendly and powerful search-enabled website using Remix and Pagefind! By combining Remix and Pagefind, you can build a website with full-text search functionality that is incredibly simple and low-cost.
11. Thank You
12. One more thing
13. One more thing Remix ２年前から使ってるけど、当時はそんな案件(クライアント)はまったくなかった。 どっかで Remix の仕事あったらいいのにな〜と思っていた。そういう人は今もいるはず。 プロダクション利用も徐々に増えてきたけど、まだ少数。 そういう企業で Remix に慣れてるエンジニアのニーズはあるようだ。 近い将来、既存 react-router アプリの v7 へのマイグレーションニーズが出てきそう。 Remix エンジニア採用したい人と、Remix 仕事したい人のマッチングをできるといいな。 そうだ: Remixドキュメント日本語版に Remix を使う仕事の募集情報載ってるといいかも？ Web 2.0 の頃にあった Job Board 的な。日本国内限定だけど。 採用情報へのリンク、載せたい方いらっしゃいますか？ 大変になってきたら無料では無理かもだけど、そこまで盛り上がる気はちょっとしないかな。 。？ 興味ある方いらっしゃる前提で: あとで相談させてください。 XのDMなど ついでに Remix を企業・プロダクションで使ってる方を Meetup にお誘いしたい。 会場提供もしてもらえるといいな！
14. Thank You (本当)