Start Getting started

Getting started

Three pieces: <FileDrive> in a page, one route of your server that keeps the entries and asks your application who may do what, and a bucket that keeps the bytes. This page puts the first two in a Next.js application; Storage is the third.

npm

Install

@rebofiles/react for the page, @rebofiles/server for the route. React 18 or later, Node 22.12 or later.

React

The page

The whole drive, in the height it is given.

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

That is the search, My files, Shared with me, Recent and the trash, the list and the grid, previews and the viewer, versions, activity, uploads by button or by dropping files and folders, and a screen of settings. React component has every prop.

Server

The route

createDriveHandler takes a Request and gives a Response, so it is a Next.js route handler as it is.

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 says who is asking, from your session; byRoles answers who may do what from the drive itself. The route and Who may do what go through both.

In the page

Without a server

For a demo, a story or a test: the drive kept in the page, the bytes as 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' })} />

Where to go next

Storage: S3 and disk →The bucket, its keys and its rule of origins.Headless: your own UI →The hooks the drive is built from, and a whole drive made of them.Sharing and links →Roles down the tree, links with a password, telling people.AI assistants (MCP) →Claude finding, reading and filing documents, with the user’s rights.

Repository

Run the repository

Every package and every application, from source.

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

Command	What it does
npm run dev	The playground: the whole drive against a server in the same process, the bytes in a folder, the entries in SQLite. `?as=bea` is someone else.
npm run demo	The demo of the landing: the drive kept in the page, with Claude’s calls to the MCP tools.
npm run storage	The drive against a real bucket (R2, S3, MinIO), from `apps/storage/.env`.
npm run storage:check	The whole way a file goes against that bucket, from Node, and everything deleted after.
npm run desktop	The desktop application, with Tauri, against the playground.
npm run site	This site.
npm test	Every test of the packages, in Node.
npm run test:browser	The drive in Chrome with Playwright, axe on every state.
npm run typecheck	TypeScript, strict, on the packages and the applications.
npm run lint	Biome.