@wasp-lang/cursor-template

// Wasp Import Rules

• Path to Wasp functions within .ts files must come from 'wasp', not '@wasp'! ✓ import { Task } from 'wasp/entities' ✓ import type { GetTasks } from 'wasp/server/operations' ✓ import { getTasks, useQuery } from 'wasp/client/operations' ✗ import { getTasks, useQuery } from '@wasp/...' ✗ import { getTasks, useQuery } from '@src/feature/operations.ts'

• Path to external imports within 'main.wasp' must start with "@src/"! ✓ component: import { LoginPage } from "@src/client/pages/auth/LoginPage.tsx" ✗ component: import { LoginPage } from "@client/pages/auth/LoginPage.tsx"

• In the client's root component, use the Outlet component rather than children ✓ import { Outlet } from 'react-router-dom';

// Wasp DB Schema Rules

• Add databse models to the 'schema.prisma' file, NOT to 'main.wasp' as "entities"
• Do NOT add a db.system nor a db.prisma property to 'main.wasp'. This is taken care of in 'schema.prisma'
• Keep the 'schema.prisma' within the root of the project

// Wasp Operations

• Types are generated automatically from the function definition in 'main.wasp', ✓ import type { GetTimeLogs, CreateTimeLog, UpdateTimeLog } from 'wasp/server/operations'
• Wasp also generates entity types based on the models in 'schema.prisma' ✓ import type { Project, TimeLog } from 'wasp/entities'
• Make sure that all Entities that should be included in the operations context are defined in its definition in 'main.wasp' ✓ action createTimeLog { fn: import { createTimeLog } from "@src/server/timeLogs/operations.js", entities: [TimeLog, Project] }

// Wasp Auth

• When creating Auth pages, use the LoginForm and SignupForm components provided by Wasp ✓ import { LoginForm } from 'wasp/client/auth'
• Wasp takes care of creating the user's auth model id, username, and password for a user, so a user model DOES NOT need these properties ✓ model User { id Int @id @default(autoincrement()) }

// Wasp Dependencies

• Do NOT add dependencies to 'main.wasp'
• Install dependencies via 'npm install' instead

// Wasp

• Use the latest Wasp version, ^0.15.0
• Always use typescript for Wasp code.
• When creating Wasp operations (queries and actions) combine them into an operations.ts file within the feature directory rather than into separate queries.ts and actions.ts files

// React

• Use relative imports for other react components
• If importing a function from an operations file, defer to the wasp import rules

// CSS

• Use Tailwind CSS for styling.
• Do not use inline styles unless necessary

// General

• Use single quotes

Wasp Cursor IDE Template

This is a basic starter template for Wasp apps but with a couple of modifications to give you the best experience when using the Cursor IDE for development. Specifically, a .cursorrules file optimized for Wasp apps, and Wasp example code curated specifically for Cursor.

Getting Started

1. Make sure you have Wasp installed: curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s
2. Create a new repo from this template: Use the Wasp Cursor Template
3. Clone your new repo: git clone https://github.com/<your-username>/<your-repo-name>.git
4. Position yourself in the project directory: cd <your-repo-name>
5. Run wasp db start to start the Postgres database.
6. In a new terminal, run wasp db migrate-dev to migrate the database.
7. Run wasp start to start the development server.

How it works with Cursor

We've included a .cursorrules file that provides context to the Cursor AI so that it can help you build your Wasp app. Make sure Cursor can access this file by going to preferences > cursor settings > general > include .cursorrules file.

The .cursorrules file is our attempt at fixing the common mistakes the AI assistants make while building a Wasp full-stack app, but if you find that the AI is still making mistakes, you can try to add more context to the .cursorrules file, or within the Cursor settings.

Also, make sure you have the Wasp docs indexed in Cursor. You can do this by going to preferences > cursor settings > features > add new doc . Then, you can include them in Cursor chat by using the @docs keyword. This often improves the AI's ability to help you with Wasp-specific code.

Project Structure

The project is structured to offer just enough context for the AI to help you with Wasp-specific code, and to get you started with building your app quickly, but without overwhelming you with too much code.

In the sections below, we'll go through each directory and explain why we've included them and what they do.

src/
├── auth/                          // Auth-related files
├── client/                        // Client-only components and the Main.tsx app wrapper
├── exampleNotesFeature/           // Example feature code (for Cursor)
│   ├── ExampleNotePage.tsx           
│   ├── ExampleNoteDashboard.tsx      
│   └── operations.ts              // Example server-side functions 
├── main.wasp                      // App configuration file where you can define routes, auth, operations, etc.
├── .cursorrules                   // Cursor rules file / where the magic happens

main.wasp

The main.wasp file is the main configuration file for your app. It's where you define your routes, auth, operations, etc.

This is Wasp's secret sauce and allows Wasp to generate the full-stack code for your app, so you can just focus on writing the business logic.

For more info on Wasp's config file and how Wasp works, check out the Wasp Introduction.

Auth

The auth directory contains the login and signup pages. They import and take advantage of Wasp's Auth API to handle the full-stack auth logic for you. E.g., after defining the Auth methods you'd like to use in main.wasp, Wasp will generate the login and signup forms for the defined methods, and handle the full-stack auth logic for you, including validation, error handling, etc.

For more info on Wasp Auth, check out the Wasp Auth docs.

Client

The client directory contains the client-only components and the Main.tsx app wrapper. It also contains the Main.css file, which imports Tailwind CSS so you can can get started styling your app with Tailwind without having to configure it yourself.

Example Notes Feature

The exampleNotesFeature directory contains the example full-stack feature code. It's a simple page that allows you to create, read, update, and delete notes.

This feature is a good starting point for the AI to reference and use an example when creating new features for your app. It is especially convenient when using Cusror Compose to create and edit features across multiple files. Once you start building out a feature set of your own, you can delete this example feature if you like.

Note that this directory includes an operations.ts file, which contains the server-side functions for the feature. Because these functions are defined in the main.wasp file, Wasp will configure the server to use them, and also make them available to the client.

For more info on Wasp Operations, check out the Wasp Operations docs.

Extra help

If you get stuck, you can ask for help on the Wasp Discord. =}