Verwendung von Cursor + Claude für die Erstellung von Full-Stack SaaS-Apps

Tutorials

Letzte Woche habe ich ein Video-Tutorial veröffentlicht, das zeigt, wie ich Cursor und Claude 3.5 verwende, zusammen mit Open SaaS, um vollständige SaaS-Apps zu erstellen.

Das Originalvideo wurde von Influencer Rohan Paul reposted und hat mittlerweile über 200.000 Aufrufe!

https://x.com/hot_town/status/1831679375269310890

Also, da es ein Thema zu dem viele Interesse haben scheinen, habe ich beschlossen, zusätzliche Informationen und Tipps bereitzustellen, um dem Video beizustehen und Ihnen beim schnellen Aufbau von SaaS-Apps zu helfen und Ihnen vielleicht ein paar extra Geld zu verdienen!

Das Wichtigste ist, dass ich Open SaaS verwende, ein kostenloser, quelloffener, vollständiger React-, NodeJS- und Prisma-SaaS-Starter als Basis.

Open SaaS enthält bereits eine Reihe von coolen Features aus der Schachtel:

  • Fullstack-Authentifizierung

  • Beispiele für Open AI API-Apps

  • Beispiele für AWS S3-Dateiupload

  • Integration von Stripe oder Lemon Squeezy für Zahlungen

  • Vollständige typesafety

  • Admin-Dashboard

  • E-Mail-Senden

  • Vollständige Dokumentation

  • Einfache, mit einem Befehl durchgeführte Deployments

Wenn Sie mehr erfahren möchten, schauen Sie auf die Open SaaS Homepage vor.

Nicht nur das Template ist ein großartiger Start, weil es mit vielen Standardcode-Stücken auskommt, sondern es ist auch auf Wasp aufgebaut, einem React/NodeJS-Framework mit eingebauten Batterien.

Wasp’s Verwendung einer zentralen Konfigurationsdatei bedeutet, dass Sie nur Features in wenigen Zeilen definieren müssen und Wasp sie für Sie verwalten wird, was das Schreiben von vielen Standardcode-Stücken für Dinge wie Authentifizierung vermeidet, beispielsweise:

app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

Das bedeutet, dass beim Arbeiten mit AI-unterstützten Codetools wie Cursor und Claude das AI weniger Arbeit machen muss. Es schreibt einen einfachereren Code und Sie erhalten einen einfacher zu debuggen Code!

Wenn ich mit Cursor arbeite, stelle ich fest, dass es immer noch einige Probleme mit dem AI-Halluzinose oder dem Schreiben von fehlerhaften Codes gibt. Ich habe diese Probleme auf zwei Wegen gelöst:

  1. Füge die Wasp-Dokumentation in das Cursor-Kontext hinzu

  2. Gib Cursor Anweisungen, wie es die häufigsten Fehler, die es in den Cursor-Regeln-Einstellungen macht, überwinden kann.

  3. Stelle sicher, dass Sie Ihre gesamte Codebasis indizieren.

Der Vorteil von Open SaaS und Wasp als Unterbau ist, dass beide kostenlos und Open Source sind. Glücklicherweise bedeutet das, dass wir auch Zugriff auf ihre Rohdokumentationsdateien haben, die in Markdown geschrieben sind und auf ihren jeweiligen GitHub-Repositories gefunden werden können.

Also was ich tun werde, ist, die Wasp-Markdown-Dateien in ihre eigene Directory innerhalb des Projekts, auf dem ich arbeite, zu kopieren. Dann kann ich die Dokumentation immer dann referenzieren, wenn ich Fragen habe oder versuche, eine neue Funktion zu implementieren.

Dann kann ich, wenn ich den Cursor-Composer oder Chat-Interface verwende, das „@“-Zeichen verwenden und Ordner -> Dokumentation auswählen und einen solchen Prompt schreiben:

Mithilfe der @docs als Leitfaden, helfe mir, die Chat-Funktionalität mit Wasp’s Websockets-Feature in meine App zu integrieren. Geben Sie der App eine Chat-Seite…

Cursor und Claude sind hervorragend darin, Code über mehrere Dateien zu schreiben, aber sie können immer noch kleine Fehler machen, wie z.B. falsche Importe oder das Verpassen einer Wasp-Funktion, die die Implementierung schneller machen würde.

Daher bevorzuge ich es, diese häufigsten Fehler zu kennzeichnen und sie der Cursor-Regelensektion innerhalb der Cursor-Einstellungen hinzuzufügen. Alternativ können Sie diese Regeln in einem .cursorrules-Datei im Stammverzeichnis Ihres Projekts ablegen, wenn Sie sie projektabhängig behalten möchten.

Wichtig ist, dass Sie, wenn Sie feststellen, dass Cursor immer die gleichen Fehler macht, die Dokumentation überprüfen, das Problem finden und eine neue Regel hinzufügen, wie sie erscheinen.

Hier sind die bisher für mich nützlichen Regeln:

  • Wenn Sie Wasp-Funktionen aus dem SDK importieren, stellen Sie sicher, dass Sie ‚wasp‘ verwenden und nicht ‚@wasp‚, z.B. import { Task } from 'wasp/entities', import { type GetTasks } from 'wasp/server/operations', import { getTasks, useQuery } from 'wasp/client/operations'

  • Fügen Sie neue Entitäten (also Modelle) der schema.prisma hinzu, NICHT der main.wasp Datei

  • Fügen Sie keine Abhängigkeiten der main.wasp Datei hinzu, sondern befehlen Sie ihnen stattdessen mittels npm install zu installieren.

  • Wenn Sie Wasp-Operationen (Abfragen und Aktionen) erstellen, kombinieren Sie sie in einer operations.ts-Datei innerhalb des Feature-Verzeichnisses anstatt separate queries.ts und actions.ts-Dateien zu verwenden

Das ist einfach. Stellen Sie sicher, dass Sie in Ihren Cursor-Einstellungen die Option haben, Ihre Codebasis zu indizieren, da diesCursor erleichtert, Ihr ganzes Projekt (sowie die Dokumentationsdateien) in den Kontext zu bringen, wenn Sie es bitten, etwas für Sie zu tun.

Es gibt auch eine Option Neue Ordner standardmäßig indexieren im Dropdown-Menü Einstellungen anzeigen. Stellen Sie sicher, dass diese Option aktiviert ist, um neue Ordner und Funktionen automatisch zu indizieren, wenn Cursor sie erstellt

Und das ist schon fast alles. Es gibt keinen Grund mehr, dass Sie nicht das coole SaaS-App-Idee, die Sie immer hatten, umsetzen.

Die Verwendung von Cursor zusammen mit Open SaaS und Wasp ist wie ein Cheatschalter für die SaaS-App-Entwicklung, also haben Sie Spaß damit!

Oh, und wenn Sie das nützlich finden, wären wir dankbar über einen Stern auf GitHub 🙏

Es ist die einfachste Art, Open-Source-Initiative wie unsere zu unterstützen.

Danke und bis zum nächsten Mal!

Source:
https://wasp-lang.hashnode.dev/using-cursor-claude-to-make-full-stack-saas-apps