Show HN: Bknd - 嵌入任何 React 技术栈的 Firebase 替代方案
Lightweight 的 Firebase/Supabase 替代方案,旨在可在任何地方运行,包括 Next.js、Remix、Astro、Cloudflare、Bun、Node、AWS Lambda 等。
bknd.io
License
View license 788 stars 15 forks
bknd-io/bknd
main BranchesTags Go to file Code
Folders and files
Name| Name| Last commit message| Last commit date ---|---|---|---
Latest commit
History
452 Commits .github/workflows| .github/workflows app| app docker| docker docs| docs examples| examples packages| packages .gitignore| .gitignore LICENSE.md| LICENSE.md README.md| README.md biome.json| biome.json bun.lock| bun.lock package.json| package.json tsconfig.json| tsconfig.json verdaccio.yml| verdaccio.yml View all files
bknd 通过提供一个功能完善的后端来简化应用程序的开发,该后端用于数据库管理、身份验证、媒体和工作流程。由于其轻量级且基于 Web 标准构建,因此几乎可以在任何地方部署,包括在您选择的框架内运行。不再需要部署多个独立的服务!
有关文档和示例,请访问 https://docs.bknd.io.
Warning
请记住,bknd 仍在积极开发中,因此在达到 v1.0.0 之前,不能保证完全向后兼容。
Size
bknd 在 npm 上的大小具有误导性,因为 bknd 包包括后端、UI 组件以及捆绑到 CLI 中的整个后端(包括静态资源)。
根据您使用的内容,大小可能会更高,因为会引入额外的依赖项。 完整的 bknd 应用程序作为 API 的最小大小约为 212 kB (gzip 压缩后)(例如,作为 Cloudflare Worker 部署)。
Motivation
创建数字产品始终需要开发后端(逻辑)和前端(外观)。 从头开始构建后端需要在身份验证和数据库管理等领域拥有深厚的知识。 使用后端框架可以加快初始开发速度,但仍需要不断努力才能在其约束范围内工作(例如,"如何使用 Y 做 X?"),这会很快降低您的速度。 选择后端系统是一个艰难的决定,因为您可能在遇到限制之前不会意识到它们。
解决方案: 一种仅假设和实现原始细节、集成到多个环境并遵守行业标准的后端系统。
Features
- ⚡ 具有完整
REST API的即时后端:- Data:轻松定义、查询和控制您的数据。
- Auth:轻松实现可靠的身份验证策略。
- Media:毫不费力地管理和提供所有媒体文件。
- Flows:设计和运行具有无缝自动化的工作流程。(
UI集成即将推出!)
- 🌐 构建在 Web 标准之上,以实现最大的兼容性
- 🏃♂️ 多种运行模式
- 使用
CLI独立运行 - 使用
JavaScript运行时环境 (Node,Bun,workerd) - 使用
React框架 (Next.js,React Router,Astro)
- 使用
- 📦 具有类型安全的官方
API和React SDK - ⚛️ 用于自动配置的身份验证和媒体组件的
React元素
Structure
该包主要分为 4 个部分,每个部分都有特定的用途:
Import | Purpose
---|---
bknd``bknd/adapter/* | 后端,包括 API 和适配器
bknd/ui | 用于 React 框架的 Admin UI 组件
bknd/client | 用于 API 端点的 TypeScript SDK 和 React hooks
bknd/elements | 用于身份验证和媒体的 React 组件
The backend (bknd)
将后端作为任何 JS 运行时环境或框架的 API 提供服务。 后者特别方便,因为它允许您将前端和后端捆绑在一起部署。 此外,它允许以您已经熟悉的方式添加额外的逻辑。 只需添加另一条路由,您就可以开始了。
这是一个使用 node 提供 API 服务的示例:
import { serve } from "bknd/adapter/node"
serve();
Integrated admin UI (bknd/ui)
使用 Admin UI 可以管理您的数据,包括使用图形用户界面对后端进行完全配置。 使用 vite,您的 admin 路由如下所示:
import { Admin } from "bknd/ui"
import "bknd/dist/styles.css";
export default function AdminPage() {
return <Admin />
}
Using the REST API or TypeScript SDK (bknd/client)
如果您没有使用 JavaScript 环境,您仍然可以使用 REST API 访问任何端点:
curl -XGET <your-endpoint>/api/data/entity/<entity>
{
"data": [
{ "id": 1, ... },
{ "id": 2, ... }
],
"meta": { /* ... */ }
}
在 JavaScript 环境中,您可以使用具有类型安全的 TypeScript SDK。 上面的示例如下所示:
import { Api } from "bknd/client";
const api = new Api({ host: "<endpoint>" });
const { data } = await api.data.readMany("<entity>");
如果您使用的是 React,则会公开 2 个 hooks (useApi, useEntity),以及每个 hooks 周围的 swr 包装器 (useApiQuery, useEntityQuery)。 swr 包装的 hooks 自动处理查询失效:
import { useState } from "react";
import { useEntityQuery } from "bknd/client";
export default function App() {
const { data } = useEntityQuery("todos");
return <ul>
{data?.map(todo => (
<li key={todo.id}>{todo.name}</li>
))}
</ul>
}
React elements (bknd/elements)
您无需了解 API 详细信息即可将媒体上传包含到您的应用程序中。 对于用户头像上传,这就是您所需要的:
import { Media } from "bknd/elements"
import "bknd/dist/main.css"
export function UserAvatar() {
return <Media.Dropzone
entity={{ name: "users", id: 1, field: "avatar" }}
maxItems={1}
overwrite
/>
}
导入路径还导出用于登录和注册表单的组件,这些组件会自动指向 bknd 默认值。
🚀 Quick start
要快速启动一个实例,请运行:
npx bknd run
Installation
npm install bknd
About
Lightweight 的 Firebase/Supabase 替代方案,旨在可在任何地方运行,包括 Next.js、Remix、Astro、Cloudflare、Bun、Node、AWS Lambda 等。
bknd.io
Resources
License
Stars
Watchers
Forks
Releases 21
v0.10.1 Latest Mar 26, 2025 + 20 releases
Packages 0
No packages published
Languages
- TypeScript 99.3%
- Other 0.7%
