使用Cursor + Claude创建全栈SaaS应用程序

教程

上周，我发布了一个视频教程，展示了我是如何使用Cursor和Claude 3.5，以及Open SaaS，来制作全栈SaaS应用程序的。

这个原视频被影响者Rohan Paul转发，现在浏览量已经超过20万次！

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

所以，既然这似乎是很多人感兴趣的话题，我认为我应该提供一些额外的信息和技巧，来配合这个视频，帮助大家快速开始建立SaaS应用程序，希望能帮你赚点外快！

最重要的是，我使用Open SaaS，这是一个免费开源，基于React，NodeJS和Prisma的全栈SaaS启动项目。

Open SaaS内置了许多酷炫的功能：

  • 全栈认证

  • Open AI API应用程序示例

  • AWS S3文件上传示例

  • Stripe或Lemon Squeezy支付集成

  • 全栈类型安全

  • 管理仪表板

  • 发送电子邮件

  • 完整文档

  • 简单，一键部署

如果你想要了解更多，请查看开源SaaS官网。

模板是一个很好的起点，因为它带有很多样板代码，而且它是基于黄蜂构建的，这是一个集成了React/NodeJS的全栈框架。

黄蜂使用一个中心配置文件，这意味着你只需要在几行代码中定义功能，黄蜂会为你管理它们，从而消除了为诸如认证等事物编写大量样板代码的需求：

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

这意味着，当使用像Cursor和Claude这样的AI辅助编码工具时，AI的工作量大大减少。它编写的代码更简单，你得到的可调试代码也更容易！

当我使用Cursor时，我注意到AI仍然会有一些幻觉或编写有错误的代码的问题。我以两种方式解决了这些问题：

  1. 将Wasp文档添加到Cursor的上下文中

  2. 指导Cursor如何克服在Cursor规则设置中常见错误

  3. 确保对你的整个代码库进行索引

使用开源的Open SaaS和Wasp底层框架的好处是它们都是免费的并且是开源的。幸运的是，这意味着我们还可以访问它们的原始文档文件，这些文件是用Markdown编写的，可以在各自的GitHub仓库中找到。

所以我将会把Wasp的Markdown文档文件复制到我在项目中工作的根目录下的一个自己的目录中。然后，当我有问题或者试图实现一个新功能时，我可以参考这些文档。

然后，当我在使用Cursor的composer或聊天界面时，我可以用“@”符号并选择文件 -> 文档，并写下这样的提示：

使用@docs作为指导，帮助我使用Wasp的WebSocket特性实现聊天功能到我的应用中。给应用添加一个聊天页面…

Cursor和Claude在跨多个文件编写代码方面非常出色，但它们仍然可能会犯一些小错误，比如错误地引入文件，或者跳过了一个可以使实现更快的Wasp特性。

以下是文本的简体中文翻译，已保留您指定的自定义分隔符：

这就是为什么我喜欢将这些常见错误添加到Cursor设置的Cursor Rules部分中。另外，如果您希望它们仅与特定项目相关，也可以将这些规则添加到项目根目录下的.cursorrules文件中。

重要的是，如果您发现Cursor反复出现同样的错误，要查阅文档，找出问题所在，并在出现时添加新规则。

以下是到目前为止我发现有用的规则：

  • 从SDK导入Wasp函数时，请确保使用 ‘wasp’ 而不是 ‘@wasp‘，例如：import { Task } from 'wasp/entities'，import { type GetTasks } from 'wasp/server/operations'，import { getTasks, useQuery } from 'wasp/client/operations'

  • 将新的实体（即模型）添加到 schema.prisma 文件中，而不是 main.wasp 文件中

  • 不要将依赖项添加到 main.wasp 文件中，而是通过 npm install 指导安装。

  • 在创建 Wasp 操作（查询和动作）时，将它们合并到特性目录中的 operations.ts 文件中，而不是分开的 queries.ts 和 actions.ts 文件

这是一个简单的事情。确保在你的 Cursor 设置中，你选择了索引你的代码库的选项，因为这样可以让 Cursor 在你请它为你做事时更容易地将你的整个项目（包括文档文件）置于上下文中。

在 显示设置 下拉菜单中还有一个选项 默认索引新文件夹。确保启用此选项，以自动索引 Cursor 创建的新文件夹和特性

差不多就是这样。现在你没有借口不构建你一直以来的那个很酷的SaaS应用想法了。

使用 Cursor，配合 Open SaaS 和 Wasp，就像是 SaaS 应用开发的作弊码，所以好好享受它吧！

顺便说一句，如果你觉得这很有用，我们会在 GitHub 上很感激你的一个星标 🙏

这是支持我们这样的开源计划的最简单方式。

感谢您的支持，下次见！

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