开始快速开始

快速开始

三个部分：页面中的 <FileDrive>；服务器上的一条路由，负责保存条目并询问你的应用谁可以做什么；以及保存文件内容的存储桶。本页把前两部分放进一个 Next.js 应用；存储一页介绍第三部分。

npm

安装

页面使用 @rebofiles/react，路由使用 @rebofiles/server。需要 React 18 及以上、Node 22.12 及以上。

React

页面

完整的网盘，占满给它的高度。

app/files/page.tsx

'use client';
import { FileDrive } from '@rebofiles/react';

export default function Files() {
  return (
    <div style={{ height: '100vh' }}>
      <FileDrive base="/api/files" title="Acme Files" language="en" />
    </div>
  );
}

这就包含了搜索、我的文件、与我共享、最近和回收站，列表和网格，预览和查看器，版本，动态记录，通过按钮或拖放文件和文件夹上传，以及设置界面。React 组件一页列出了所有属性。

服务器

路由

createDriveHandler 接收 Request 并返回 Response，因此它本身就是一个 Next.js 路由处理器。

app/api/files/[...path]/route.ts

import { byRoles, createDriveHandler, s3OptionsFrom, s3Storage, sqliteMetadata } from '@rebofiles/server';
import { session } from '@/lib/auth'; // your own

const handle = createDriveHandler({
  storage: s3Storage(s3OptionsFrom(process.env)),
  metadata: await sqliteMetadata('drive.sqlite'),
  identify: async (request) => {
    const user = await session(request);
    return user ? { id: user.id } : null;
  },
  authorize: byRoles,
  secret: process.env.REBOFILES_SECRET!,
  base: '/api/files',
});

export { handle as GET, handle as POST, handle as PATCH, handle as PUT, handle as DELETE };

identify 根据你的会话判断谁在请求；byRoles 根据网盘本身判断谁可以做什么。路由和谁可以做什么两页分别详细介绍。

纯页面内

不使用服务器

用于演示、故事书或测试：网盘保存在页面中，文件内容以 Blob 形式存在。

import { FileDrive, createMemoryClient } from '@rebofiles/react';

// No server: the drive kept in the page, with the same client and the same refusals.
<FileDrive client={createMemoryClient({ user: 'You' })} />

下一步

存储：S3 与磁盘 →存储桶、它的键和跨域规则。Headless：你自己的界面 →构建网盘所用的 hooks，以及完全由它们搭建的网盘。共享与链接 →沿目录树继承的角色、带密码的链接、通知相关人员。AI 助手（MCP） →Claude 以用户的权限查找、阅读和归档文档。

仓库

运行仓库

从源码运行每个包和每个应用。

git clone https://github.com/JFranciscoRobles/rebofiles
cd rebofiles && npm install
npm run dev        # the playground: the drive on this computer, at http://localhost:5180

命令	作用
npm run dev	Playground：完整网盘，服务器与页面在同一进程，文件内容存放在一个文件夹中，条目存放在 SQLite 中。`?as=bea` 表示以另一个人的身份访问。
npm run demo	首页演示：网盘保存在页面中，包含 Claude 对 MCP 工具的调用。
npm run storage	连接真实存储桶（R2、S3、MinIO）的网盘，配置来自 `apps/storage/.env`。
npm run storage:check	在 Node 中针对该存储桶走一遍文件的完整流程，最后全部删除。
npm run desktop	基于 Tauri 的桌面应用，连接 playground。
npm run site	本网站。
npm test	在 Node 中运行所有包的测试。
npm run test:browser	用 Playwright 在 Chrome 中测试网盘，每个状态都用 axe 检查。
npm run typecheck	对各个包和应用进行严格的 TypeScript 检查。
npm run lint	Biome。