> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Refine Quickstart

> Füge Base44 zu deinem Refine-Projekt hinzu

Folge diesem Quickstart, um Base44 zu deinem Refine-Projekt hinzuzufügen. Du erstellst ein Base44-Backend, definierst Entitäten und integrierst Base44 als Data Provider in Refine.

<Note>Die CLI erfordert Node.js 20.19.0 oder höher.</Note>

## Einrichtung

<Steps>
  <Step title="Base44 CLI installieren">
    Installiere die Base44 CLI global:

    ```bash theme={null}
    npm install -g base44@latest
    ```
  </Step>

  <Step title="Ein Base44-Backend erstellen">
    Navigiere in dein Refine-Projektverzeichnis und führe aus:

    ```bash theme={null}
    base44 create
    ```

    Wenn du noch nicht eingeloggt bist, fordert dich der Befehl auf, dich zu authentifizieren.

    Wähle **Create a basic project**, wenn du dazu aufgefordert wirst. Dies erstellt die Backend-Dateien in deinem Refine-Projektverzeichnis. Folge dann den Eingabeaufforderungen, um dein Projekt zu konfigurieren.

    Wenn du ein Projekt erstellst, werden [Base44 skills](/developers/backend/overview/base44-skills) automatisch eingebunden und liefern deinem KI-Agenten Anweisungen und Kontext für Base44-Aufgaben.
  </Step>

  <Step title="Ausgabeverzeichnis konfigurieren">
    Aktualisiere deine [config.jsonc](/developers/backend/overview/project-structure#config-jsonc), um auf deine Refine-Build-Ausgabe zu verweisen. Füge das Feld `site.outputDirectory` hinzu oder ändere es:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist"
      }
    }
    ```
  </Step>

  <Step title="Entitäten definieren">
    Erstelle [Entity-Schemas](/developers/references/entities/introduction), um deine Datenstrukturen zu definieren. Entity-Dateien müssen im Verzeichnis `base44/entities/` abgelegt werden.

    Erstelle zum Beispiel `base44/entities/task.jsonc`:

    ```json theme={null}
    {
      "name": "Task",
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "completed": {
          "type": "boolean",
          "default": false
        }
      },
      "required": ["title"]
    }
    ```
  </Step>

  <Step title="Entitäten zu Base44 pushen">
    Pushe deine Entity-Schemas zu Base44:

    ```bash theme={null}
    base44 entities push
    ```

    Dieser Befehl synchronisiert deine lokalen Entity-Definitionen mit deinem Base44-Backend, sodass sie in deiner Anwendung verfügbar werden. Siehe [`entities push`](/developers/references/cli/commands/entities-push) für weitere Informationen.
  </Step>

  <Step title="Base44 SDK installieren">
    Installiere das Base44-SDK in deinem Refine-Projekt:

    ```bash theme={null}
    npm install @base44/sdk
    ```
  </Step>

  <Step title="Einen Base44-Client erstellen">
    Erstelle einen Base44-SDK-[Client](/developers/references/sdk/getting-started/client) in deinem Projekt. Die `appId` findest du in deiner Datei `base44/.app.jsonc`.

    Erstelle zum Beispiel `src/api/base44Client.ts`:

    ```typescript theme={null}
    import { createClient } from '@base44/sdk';

    export const base44 = createClient({
      appId: 'your-app-id-from-app.jsonc'
    });
    ```
  </Step>

  <Step title="Das SDK in deinem Frontend verwenden">
    Erstelle eine einfache Komponente, um Aufgaben aufzulisten und hinzuzufügen. Erstelle zum Beispiel `src/components/TaskList.tsx`:

    ```tsx theme={null}
    import { useState, useEffect } from 'react';
    import { base44 } from '../api/base44Client';

    export function TaskList() {
      const [tasks, setTasks] = useState<any[]>([]);
      const [newTaskTitle, setNewTaskTitle] = useState('');
      const [isLoading, setIsLoading] = useState(false);

      useEffect(() => {
        loadTasks();
      }, []);

      const loadTasks = async () => {
        setIsLoading(true);
        try {
          const taskList = await base44.entities.Task.list();
          setTasks(taskList);
        } catch (error) {
          console.error('Error loading tasks:', error);
        }
        setIsLoading(false);
      };

      const addTask = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newTaskTitle.trim()) return;

        setIsLoading(true);
        try {
          const newTask = await base44.entities.Task.create({
            title: newTaskTitle,
            completed: false
          });
          setTasks([...tasks, newTask]);
          setNewTaskTitle('');
        } catch (error) {
          console.error('Error creating task:', error);
        }
        setIsLoading(false);
      };

      return (
        <div>
          <h1>Tasks</h1>

          {isLoading && <p>Loading...</p>}

          <ul>
            {tasks.map((task) => (
              <li key={task.id}>{task.title}</li>
            ))}
          </ul>

          <form onSubmit={addTask}>
            <input
              type="text"
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
              placeholder="New task"
              disabled={isLoading}
            />
            <button type="submit" disabled={isLoading || !newTaskTitle.trim()}>
              Add Task
            </button>
          </form>
        </div>
      );
    }
    ```

    <Note>
      Verwende beim Aufruf des SDK den exakten Entity-Namen aus deinem Schema, einschließlich Groß- und Kleinschreibung. Konventionell beginnen Entity-Namen mit einem Großbuchstaben. Wenn dein Schema z. B. `"name": "Task"` hat, greifst du als `base44.entities.Task.list()` darauf zu.
    </Note>
  </Step>

  <Step title="Die Komponente in deiner App importieren">
    Aktualisiere `src/App.tsx`, um die TaskList-Komponente zu verwenden:

    ```tsx theme={null}
    import { TaskList } from './components/TaskList';

    function App() {
      return <TaskList />;
    }

    export default App;
    ```
  </Step>

  <Step title="Deine App lokal ausführen">
    Starte deinen Refine-Entwicklungsserver, um deine Integration zu testen. Führe aus dem Projekt-Stammverzeichnis aus:

    ```bash theme={null}
    npm run dev
    ```

    Deine Refine-App verbindet sich über den eigenen Data Provider mit deinem Base44-Backend und übernimmt automatisch alle CRUD-Operationen.
  </Step>

  <Step title="Dein Frontend bauen">
    Wenn dir gefällt, wie alles lokal aussieht, baue dein Refine-Projekt für die Produktion:

    ```bash theme={null}
    npm run build
    ```

    Dies erstellt optimierte Produktionsdateien in deinem Ausgabeverzeichnis (typischerweise `dist`).
  </Step>

  <Step title="Dein Frontend veröffentlichen">
    Veröffentliche dein gebautes Frontend auf Base44:

    ```bash theme={null}
    base44 deploy
    ```

    Der `deploy`-Befehl veröffentlicht dein gebautes Frontend auf Base44 Hosting. Er pusht auch alle Updates zu deinen Entity-Schemas, falls du seit dem letzten Push Änderungen gemacht hast. Nach Abschluss siehst du deinen Projektnamen, einen Link zu deinem Base44-Dashboard und die URL deiner laufenden Anwendung.
  </Step>
</Steps>

## Nächste Schritte

Nun, da dein Base44-Backend in dein Projekt integriert ist, kannst du:

* Das [SDK](/developers/references/sdk/getting-started/overview) verwenden, um deinem Frontend weitere Funktionalität hinzuzufügen.
* [Entitäten](/developers/backend/resources/entities/overview), [Backend-Funktionen](/developers/backend/resources/functions) und [Agenten](/developers/backend/resources/agents-config) hinzufügen. Wenn du in TypeScript arbeitest, [generiere Typen](/developers/references/sdk/getting-started/dynamic-types), um Autovervollständigung und Typsicherheit zu erhalten.
* Lokal testen, indem du [`base44 dev`](/developers/references/cli/commands/dev) für das Backend und `npm run dev` für das Frontend ausführst. Siehe [Lokale Entwicklung](/developers/backend/overview/local-dev/local-development-overview) für Einrichtungsanweisungen.
* Dein Frontend weiterentwickeln und Updates mit [`base44 deploy`](/developers/references/cli/commands/deploy) veröffentlichen.
* Deine veröffentlichte Site mit [`base44 site open`](/developers/references/cli/commands/site-open) öffnen.

## Siehe auch

* [CLI-Befehlsreferenz](/developers/references/cli/commands/introduction): Alle verfügbaren CLI-Befehle
* [Projektstruktur](/developers/backend/overview/project-structure): Wie Projektdateien organisiert sind
* [JavaScript-SDK-Dokumentation](/developers/references/sdk/getting-started/overview): Verbinde deine App mit dem Backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Bring KI-Assistenten bei, mit Base44 zu arbeiten

<Note>Diese Seite wurde mit KI übersetzt. Für die genauesten und aktuellsten Informationen siehe die [englische Version](/). </Note>