Struttura del Progetto

Un progetto starter Rebase ha tre pacchetti interconnessi:

my-app/
├── .env                    # Environment variables (DATABASE_URL, JWT_SECRET, etc.)
├── package.json            # Root workspace config
│
├── frontend/               # React admin panel (Vite)
│   ├── src/
│   │   ├── App.tsx         # Main application component
│   │   ├── main.tsx        # React entry point
│   │   └── index.css       # Global styles
│   ├── package.json
│   └── vite.config.ts
│
├── backend/                # Node.js API server (Hono)
│   ├── src/
│   │   ├── index.ts        # Server entry — initializes Rebase backend
│   │   └── schema.generated.ts  # Auto-generated Drizzle schema
│   ├── drizzle.config.ts   # Drizzle ORM configuration
│   ├── Dockerfile
│   └── package.json
│
└── config/                 # Collection definitions
    └── collections/
        ├── index.ts        # Exports all collections
        └── products.ts     # Example: products collection

Frontend (frontend/)

Il frontend è un’applicazione standard Vite + React + TypeScript. Il file chiave è App.tsx, che collega tutti i controller di Rebase:

import { Rebase, Scaffold, AppBar, Drawer, ... } from "@rebasepro/core";
import { createRebaseClient } from "@rebasepro/client";
import { collections } from "virtual:rebase-collections";

// The client connects to your backend API and WebSocket
const rebaseClient = createRebaseClient({
    baseUrl: "http://localhost:3001",
    websocketUrl: "ws://localhost:3001"
});

// Collections are imported via a Vite virtual module
// that reads from the config/ directory

Concetti Chiave

• createRebaseClient — Crea il client SDK che gestisce le richieste HTTP, le connessioni WebSocket e la gestione dei token di autenticazione
• virtual:rebase-collections — Un plugin Vite che importa automaticamente le tue collezioni condivise al momento della build
• Controller — useBuildNavigationStateController, useBuildCollectionRegistryController, ecc. — questi configurano il routing, la risoluzione delle collezioni e la configurazione dell’interfaccia utente

Backend (backend/)

Il backend è un server Node.js basato su Hono (un framework HTTP veloce e leggero). Il punto di ingresso index.ts inizializza tutto:

import { initializeRebaseBackend } from "@rebasepro/server-core";
import { createPostgresAdapter } from "@rebasepro/server-postgresql";
import { Hono } from "hono";

const app = new Hono();

await initializeRebaseBackend({
    app,
    server,
    collectionsDir: "./config/collections",
    database: createPostgresAdapter({
            connection: db,
            schema: { tables, enums, relations }
        }),
    auth: {
        jwtSecret: process.env.JWT_SECRET!,
        google: { clientId: process.env.GOOGLE_CLIENT_ID },
    },
    storage: {
        type: "local",
        basePath: "./uploads"
    },
    history: true
});

initializeRebaseBackend configura:

• API REST routes a /api/data/* — CRUD auto-generato per ogni collezione
• Auth routes a /api/auth/* — registrazione, login, refresh, Google OAuth
• Storage routes a /api/storage/* — caricamento/download di file
• Server WebSocket — sincronizzazione di entità in tempo reale tramite Postgres LISTEN/NOTIFY
• Cronologia — registrazione del log di audit su ogni modifica dell’entità

Collezioni Condivise (config/)

Le collezioni sono la singola fonte di verità per il tuo modello di dati. Sono definite in TypeScript e utilizzate sia dal frontend (per la generazione dell’interfaccia utente) che dal backend (per la generazione dello schema e il routing delle API).

import { EntityCollection } from "@rebasepro/types";

export const productsCollection: EntityCollection = {
    slug: "products",
    name: "Products",
    table: "products",
    properties: {
        name: { type: "string", name: "Name" },
        price: { type: "number", name: "Price" }
    }
};

Lo slug diventa il percorso URL nell’interfaccia utente di amministrazione e l’endpoint dell’API REST (/api/data/products). La table mappa al nome della tabella PostgreSQL.

Come Si Connettono

1. Definisci le collezioni in config/
2. Il backend le legge per generare gli schemi Drizzle e montare le route REST
3. Il frontend le legge (tramite plugin Vite) per renderizzare tabelle, form e navigazione
4. La CLI le legge per generare i file di migrazione con rebase schema generate

Le modifiche alle collezioni si propagano automaticamente ovunque.

Prossimi Passi

• Guida Rapida — Inizia con un nuovo progetto Rebase
• Configurazione — Tutte le variabili d’ambiente e le opzioni

---