Zum Hauptinhalt springen
Folge diesem Quickstart, um Base44 zu deinem Solid-JS-Projekt hinzuzufügen. Du erstellst ein Base44-Backend, definierst Entitäten und integrierst das SDK in dein Frontend.
Die CLI erfordert Node.js 20.19.0 oder höher.

Einrichtung

1

Base44 CLI installieren

Installiere die Base44 CLI global:
npm install -g base44@latest
2

Ein Base44-Backend erstellen

Navigiere in dein Solid-JS-Projektverzeichnis und führe aus:
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 Solid-JS-Projektverzeichnis. Folge dann den Eingabeaufforderungen, um dein Projekt zu konfigurieren.Wenn du ein Projekt erstellst, werden Base44 skills automatisch eingebunden und liefern deinem KI-Agenten Anweisungen und Kontext für Base44-Aufgaben.
3

Ausgabeverzeichnis konfigurieren

Aktualisiere deine config.jsonc, um auf deine Solid-JS-Build-Ausgabe zu verweisen. Füge das Feld site.outputDirectory hinzu oder ändere es:
{
  "site": {
    "outputDirectory": "dist"
  }
}
4

Entitäten definieren

Erstelle Entity-Schemas, um deine Datenstrukturen zu definieren. Entity-Dateien müssen im Verzeichnis base44/entities/ abgelegt werden.Erstelle zum Beispiel base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
5

Entitäten zu Base44 pushen

Pushe deine Entity-Schemas zu Base44:
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 für weitere Informationen.
6

Base44 SDK installieren

Installiere das Base44 JavaScript-SDK:
npm install @base44/sdk
7

Einen Base44-Client erstellen

Erstelle einen Base44-SDK-Client in deinem Projekt. Die appId findest du in deiner Datei base44/.app.jsonc.Erstelle zum Beispiel src/api/base44Client.js:
import { createClient } from '@base44/sdk';

export const base44 = createClient({
  appId: 'your-app-id-from-app.jsonc'
});
8

Das SDK in deinem Frontend verwenden

Schreibe in deinem Frontend Code, um mit Instanzen deiner Entitäten zu interagieren. Zum Beispiel:
import { createSignal, onMount, For } from 'solid-js';
import { base44 } from '../api/base44Client';

export default function TaskList() {
  const [tasks, setTasks] = createSignal([]);
  const [newTaskTitle, setNewTaskTitle] = createSignal('');
  const [isLoading, setIsLoading] = createSignal(false);

  onMount(async () => {
    await loadTasks();
  });

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

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

    setIsLoading(true);
    try {
      // Create a record
      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>
        <For each={tasks()}>
          {(task) => <li>{task.title}</li>}
        </For>
      </ul>

      <form onSubmit={addTask}>
        <input
          type="text"
          value={newTaskTitle()}
          onInput={(e) => setNewTaskTitle(e.target.value)}
          placeholder="New task"
          disabled={isLoading()}
        />
        <button
          type="submit"
          disabled={isLoading() || !newTaskTitle().trim()}
        >
          Add Task
        </button>
      </form>
    </div>
  );
}
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.
9

Deine App lokal ausführen

Starte deinen Solid-JS-Entwicklungsserver, um deine Integration zu testen. Führe aus dem Projekt-Stammverzeichnis aus:
npm run dev
Deine Solid-JS-App verbindet sich über den SDK-Client mit deinem Base44-Backend, sodass du in Echtzeit mit deinen veröffentlichten Entitäten arbeiten kannst.
10

Dein Frontend bauen

Wenn dir gefällt, wie alles lokal aussieht, baue dein Solid-JS-Projekt für die Produktion:
npm run build
Dies erstellt optimierte Produktionsdateien in deinem Ausgabeverzeichnis (typischerweise dist).
11

Dein Frontend veröffentlichen

Veröffentliche dein gebautes Frontend auf Base44:
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.

Nächste Schritte

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

Siehe auch

Diese Seite wurde mit KI übersetzt. Für die genauesten und aktuellsten Informationen siehe die englische Version.