Empezar Primeros pasos

Primeros pasos

Tres piezas: <FileDrive> en una página, una ruta de tu servidor que guarda las entradas y pregunta a tu aplicación quién puede hacer qué, y un bucket que guarda los bytes. Esta página pone las dos primeras en una aplicación de Next.js; Almacenamiento es la tercera.

npm

Instalar

@rebofiles/react para la página, @rebofiles/server para la ruta. React 18 o posterior, Node 22.12 o posterior.

React

La página

El drive completo, en la altura que se le dé.

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>
  );
}

Eso es la búsqueda, Mis archivos, Compartido conmigo, Recientes y la papelera, la lista y la cuadrícula, vistas previas y el visor, versiones, actividad, subidas con botón o arrastrando archivos y carpetas, y una pantalla de ajustes. Componente de React tiene todas las props.

Servidor

La ruta

createDriveHandler recibe un Request y devuelve un Response, así que es un route handler de Next.js tal cual.

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 dice quién pregunta, a partir de tu sesión; byRoles responde quién puede hacer qué según el propio drive. La ruta y Quién puede hacer qué explican ambos.

En la página

Sin servidor

Para una demo, una historia o un test: el drive guardado en la página, los bytes como Blobs.

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' })} />

Adónde ir después

Almacenamiento: S3 y disco →El bucket, sus claves y su regla de orígenes.Headless: tu propia interfaz →Los hooks con los que está hecho el drive, y un drive entero hecho con ellos.Compartir y enlaces →Roles hacia abajo en el árbol, enlaces con contraseña, avisar a la gente.Asistentes de IA (MCP) →Claude encontrando, leyendo y archivando documentos, con los permisos del usuario.

Repositorio

Ejecuta el repositorio

Todos los paquetes y todas las aplicaciones, desde el código fuente.

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

Comando	Qué hace
npm run dev	El playground: el drive completo contra un servidor en el mismo proceso, los bytes en una carpeta, las entradas en SQLite. `?as=bea` es otra persona.
npm run demo	La demo de la portada: el drive guardado en la página, con las llamadas de Claude a las herramientas MCP.
npm run storage	El drive contra un bucket real (R2, S3, MinIO), desde `apps/storage/.env`.
npm run storage:check	Todo el recorrido de un archivo contra ese bucket, desde Node, y todo borrado al final.
npm run desktop	La aplicación de escritorio, con Tauri, contra el playground.
npm run site	Este sitio.
npm test	Todos los tests de los paquetes, en Node.
npm run test:browser	El drive en Chrome con Playwright, axe en cada estado.
npm run typecheck	TypeScript, estricto, en los paquetes y las aplicaciones.
npm run lint	Biome.