Configure Windsurf local development with hot reload and testing.
Use when setting up a development environment, configuring test workflows,
or establishing a fast iteration cycle with Windsurf.
Trigger with phrases like "windsurf dev setup", "windsurf local development",
"windsurf dev environment", "develop with windsurf".
Set up a fast, AI-augmented local development workflow using Windsurf's Cascade, Turbo mode, Previews, and terminal integration. The goal is a tight loop: edit with Cascade, preview in-IDE, iterate, test, commit.
Prerequisites
Windsurf authenticated and project open
Node.js 18+ or Python 3.10+
Git initialized in project
Instructions
Step 1: Create .windsurfrules for Project Context
<!-- .windsurfrules - placed at project root, committed to git -->
# Project: my-app
## Stack
- Language: TypeScript (strict mode)
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS v3
- Testing: Vitest + Testing Library
- Package manager: pnpm
## Architecture
- Server Components by default
- Client Components only when state/interactivity needed
- API routes in app/api/
- Business logic in lib/services/
- Types in lib/types/
## Conventions
- Named exports, never default
- async/await, never raw .then()
- zod for all runtime validation
- Error handling: Result pattern in services
Step 2: Configure .codeiumignore
# .codeiumignore - exclude from AI indexing (same syntax as .gitignore)
node_modules/
.next/
dist/
build/
coverage/
*.min.js
*.map
.env
.env.*
Step 3: Set Up Turbo Mode for Fast Terminal Execution
Turbo mode lets Cascade auto-execute terminal commands without asking permission for each one.
Cascade starts the server and opens an in-IDE Preview tab. From the Preview:
Click "Send element" (bottom-right) to select a UI element and send it to Cascade
Console errors are automatically forwarded to Cascade for debugging
Iterate by describing changes: "Make the header sticky and add a dark mode toggle"
Step 5: The Dev Loop
1. Open Cascade (Cmd/Ctrl+L)
2. Describe the feature or fix
3. Cascade edits files and runs commands (Turbo mode)
4. Preview updates in-IDE (hot reload)
5. Click broken elements → send to Cascade
6. Cascade fixes → repeat until correct
7. Run tests: "Run vitest for the files you changed"
8. Commit: "Commit these changes with message: add dark mode toggle"
Step 6: Terminal Integration
Use Cmd/Ctrl+I in the terminal for natural language commands:
Type: "find all files importing the Button component"
Windsurf generates: grep -rl "import.*Button" src/
Type: "run tests for auth module only"
Windsurf generates: npx vitest run src/auth/
Highlight terminal errors and press Cmd/Ctrl+L to send to Cascade for diagnosis.
Error Handling
Issue
Cause
Solution
Cascade not seeing project context
No .windsurfrules
Create rules file at project root
Slow AI suggestions
Large repo indexed
Add .codeiumignore
Turbo mode running dangerous commands
Missing deny list
Configure cascadeCommandsDenyList
Preview not loading
Dev server not started
Ask Cascade to start it first
Hot reload not working
Preview disconnected
Close and re-open Preview tab
Examples
Quick Project Bootstrap
Cascade prompt: "Initialize a new Next.js 14 project with TypeScript,
Tailwind CSS, and Vitest. Set up the folder structure matching
our .windsurfrules conventions."
Debug-Fix Loop
1. See error in terminal or Preview console
2. Highlight error text → Cmd/Ctrl+L → "Fix this error"
3. Cascade reads error, finds root cause, applies fix
4. Preview auto-reloads → verify fix
