SuperAPI AI 工具集

pb-react-spa

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:自动化搭建与 PocketBase 后端集成的 React 单页应用前端,采用前后端分离的 monorepo 结构(frontend/ 与 backend/)。

主要能力:技术栈为 Vite、React + TypeScript、TanStack Router(文件式路由)、TanStack Query(服务端状态)、Tailwind CSS + Shadcn UI、Biome(Lint/格式化)、PocketBase JS SDK 与 pocketbase-typegen。技能提供 references/ 参考文档,涵盖集成模式、认证、类型生成、开发与部署;后端管理由 pocketbase 技能负责。

使用方式:需 Node.js v18+ 与 npm,PocketBase 已运行且集合设计完成。脚手架命令:npx create-tsrouter-app@latest frontend --toolchain biome --package-manager npm --no-git;随后 cd frontend && npx shadcn@latest init -d,安装 @tanstack/react-query、pocketbase,并以 npm install -D pocketbase-typegen 安装类型生成工具。配置包括创建 src/lib/pocketbase.ts、在 vite.config.ts 添加 server.proxy(/api 与 /_ 指向 http://127.0.0.1:8090)、用 pocketbase-typegen 生成类型、配置 QueryClient 与认证。开发时分别运行 PocketBase 与 npm run dev;部署时将 frontend/dist 复制到 backend/pb_public/,由 PocketBase 直接托管 SPA。

限制:需自行确认超级用户邮箱与密码;不要修改生成的 plugins 数组,仅添加 server.proxy;集合变更后需重新生成类型。具体价格、平台支持与效果资料暂未提供。