Usando Cursor + Claude para crear aplicaciones de SaaS completo

La semana pasada, publicé un tutorial de video en el que mostraba cómo utilizo Cursor y Claude 3.5, junto con Open SaaS, para crear aplicaciones SaaS fullstack.

El video original fue reposteado por el influencer Rohan Paul y ahora tiene más de 200.000 visionados!

Así que, ya que parece ser un tema de interés para mucha gente, pienso que les proporcionaré algo de información extra y consejos para acompañar el video y ayudarlos a empezar a construir aplicaciones SaaS rápidamente, y con suerte, ahorrar un poco de dinero extra!

Aprovechando Open SaaS y Wasp

Lo más importante es que utilizo Open SaaS, un startup de código abierto, open-source, full-stack de React, NodeJS y Prisma para aplicaciones SaaS como mi base.

Open SaaS viene con un montón de características interesantes de forma predeterminada:

• Autenticación fullstack

• Ejemplos de aplicaciones con API de Open AI

• Ejemplos de carga de archivos a AWS S3

• Integración de pagos con Stripe o Lemon Squeezy

• Tiposafety fullstack

• Panel de administración

• Envío de correo electrónico

• Documentación completa

• Implementaciones fáciles, con un solo comando

Si quieres saber más, visita la página web de Open SaaS.

No solo es el template un gran inicio porque viene con un montón de código de plantilla, sino que también está construido sobre Wasp, un framework de React/NodeJS fullstack con pilas incluidas.

El uso de un archivo de configuración central en Wasp significa que todo lo que tienes que hacer es definir funciones en unas pocas líneas de código, y Wasp las administra por ti, eliminando la necesidad de escribir un montón de código de plantilla para cosas como Auth, por ejemplo:

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

Esto significa que, cuando trabajas con herramientas de codificación asistidas por AI como Cursor y Claude, el AI tiene menos trabajo que hacer. Escribe código mucho más simple y obtienes código que es más fácil de depurar!

Consejos y trucos de Cursor

Cuando trabajo con Cursor, noto que aún hay algunos problemas con el AI haciendo ilusiones o escribiendo código defectuoso. Resolví estos problemas de dos maneras:

1. Agregar las docs de Wasp al contexto de Cursor

2. Instruir a Cursor sobre cómo superar los errores comunes que comete en las configuraciones de las reglas de Cursor.

3. Asegúrate de indexar toda tu base de código

1. Agregue las documentaciones de Wasp al contexto de Cursor

La ventaja de utilizar Open SaaS, y Wasp como framework subyacente, es que ambos son gratuitos y de código abierto. Afortunadamente, eso significa que también tenemos acceso a sus archivos de documentación en bruto, que están escritos en markdown y se pueden encontrar en sus respectivos repositorios de GitHub.

Así que lo que haré es copiar los archivos markdown de documentación de Wasp a su propio directorio dentro de la raíz del proyecto en el que estoy trabajando. Entonces puedo referenciar las documentaciones cada vez que tenga preguntas o esté intentando implementar una nueva característica.

Luego, cuando use la herramienta de composición de Cursor o su interfaz de chat, puedo usar el símbolo “@” y seleccionar Carpeta -> Documentos y escribir un prompt como este:

Usando @docs como guía, ayúdame a implementar funcionalidad de chat con la característica de Websockets de Wasp en mi aplicación. Dé a la aplicación una página de chat…

2. Agregar reglas de Cursor para evitar errores comunes

Cursor y Claude son excelentes para escribir código a través de varios archivos, pero aún así pueden cometer pequeños errores, como visualizar importaciones fantasma o omitir una característica de Wasp que podría hacer que la implementación sea más rápida.

Es por eso que me gusta identificar estos errores comunes y agregarlos a la sección de Reglas del Cursor dentro de las Configuraciones del Cursor. Alternativamente, puedes agregar estas reglas a un archivo .cursorrules en la raíz de tu proyecto si quieres que sean específicos del proyecto.

Lo importante es que, si encuentras que Cursor hace consistentemente los mismos errores, revisa la documentación, encuentra el problema y agrega una nueva regla como aparecen.

Aquí están las reglas que he encontrado hasta ahora que son útiles:

• Al importar funciones de Wasp desde el SDK, asegúrate de usar ‘wasp’ y no ‘@wasp‘, por ejemplo: import { Task } from 'wasp/entities', import { type GetTasks } from 'wasp/server/operations', import { getTasks, useQuery } from 'wasp/client/operations'

• Agrega nuevas entidades (también conocidas como modelos) a schema.prisma, NO al archivo main.wasp

• NO agregues dependencias al archivo main.wasp, sino que instruyas para instalarlas mediante npm install en su lugar.

• cuando cree operaciones de Wasp (consultas y acciones) combínelas en un archivo operations.ts dentro del directorio de características en lugar de usar archivos separados consultas.ts y acciones.ts

3. ÍNDICE TU BASE DE CÓDIGO ENTREGA

Este es uno sencillo. Asegúrate en tus ajustes de Cursor que tienes la opción para índice de tu base de código, ya que esto hace que Cursor mantenga to tuyo proyecto entero (además de los archivos de documentación) en contexto cuando te pide que haces algo por ti.

También hay una opción para Índice nuevos directorios por defecto en la lista desplegable Mostrar ajustes. Asegúrate de que esté habilitado para índice automáticamente nuevos directorios y características como Cursor los crea

Y listo,á que empieces a construir SaaS

Y eso es todo. Ahora no hay excusa para no construir esa cool idea de aplicación SaaS que has tenido toda la vida.

Usando Cursor, junto con Open SaaS y Wasp, es como un código de truco para desarrollar aplicaciones de SaaS, así que diviértete con ello!

Y, por cierto, si encuentras esto útil, nos encantaría una estrella en GitHub 🙏

Es la forma más fácil de apoyar iniciativas de código abierto como la nuestra.

Gracias y ¡nos vemos la próxima vez!