Tauri Svelte TypeScript Guide .cursorrules prompt file

Author: Aravindh Marimuthu

What you can build

Cross-Platform Note-Taking App: Develop a secure, cross-platform note-taking app using Tauri, Svelte, and TypeScript. This app leverages Tauri's native capabilities for file system access, allowing users to save and organize notes offline. Use Svelte's reactive components for a smooth, responsive UI and implement state management for note organization.Personal Finance Manager: Create a desktop personal finance manager tool that utilizes Tauri's APIs for safe local storage and Svelte for an intuitive user dashboard. TypeScript ensures reliable data models for transactions and account management, while Axios handles secure communication with any necessary online financial services.Task and Project Management Tool: Develop a task and project management application with Svelte's component-based architecture to provide a clean and organized interface. Utilize Tauri to access local storage and TypeScript for type safety. Implement integration with external services for calendar and task synchronization using Axios.Desktop E-Learning Platform: Build an e-learning platform with Tauri for desktop integration and offline capabilities. Use Svelte to create a dynamic, engaging user interface, and leverage TypeScript for managing course content and user progress tracking. Axios can be used for secure backend content delivery and user authentication processes.Secure File Encryption Tool: Create a file encryption tool using Tauri's local file system access. Use Svelte for a user-friendly interface and TypeScript for handling encryption algorithms securely and efficiently. This tool offers users a simple way to encrypt/decrypt files with a focus on data privacy.Health & Fitness Tracker: Develop a health and fitness tracking application that integrates with Tauri for local data handling and device sensors. Use Svelte's reactivity to update user interface elements dynamically as users log exercise or dietary insights. Leverage TypeScript for accurate data types and health metrics calculations.Customizable News Aggregator: Design a news aggregator that lets users customize their news feeds and notifications. Utilize Tauri for background data fetching, Svelte for rich UI components, and TypeScript to ensure type safety. Axios will handle the retrieval of articles from various news APIs.Local Document Editor: Implement a desktop document editing application with features like markdown support using Tauri's local file capabilities. Svelte can be used to create a smooth editing interface with real-time preview, while TypeScript ensures robust management of document data and settings.Recipe Management App: Create a recipe management application that uses Tauri for offline recipe access and Svelte for a dynamic interface to add and organize recipes. TypeScript will aid in structuring the recipe data, and Axios can be utilized for fetching additional recipe content from online databases.Photo Organizer: Design a photo organization tool using Tauri for managing local photo libraries. Svelte's reactive nature allows for smooth browsing and organizing of photos, while TypeScript manages photo metadata accurately. Include functionality for basic editing and enhancement of photos.

Benefits

Synopsis

Developers creating cross-platform desktop applications will benefit by building secure, performant, and modular Tauri applications with Svelte and TypeScript, ensuring seamless backend communication.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for developers building desktop applications using Tauri, Svelte, and TypeScript. It emphasizes key principles, such as type safety, responsive UI development, security, performance optimization, and testing best practices. The file outlines practices for front-end development, enabling efficient communication with backend services through Axios, and enforcing security measures like IPC handling and HTTPS usage. It also covers build and deployment strategies with Vite, and conventions for coding style and project structure. Dependencies include Tauri, Svelte, TypeScript, Vite, and Axios, with an emphasis on consulting official documentation for best practices.

.cursorrules Content

You are an expert in developing desktop applications using Tauri with Svelte and TypeScript for the frontend.Key Principles:- Write clear, technical responses with precise examples for Tauri, Svelte, and TypeScript.- Prioritize type safety and utilize TypeScript features effectively.- Follow best practices for Tauri application development, including security considerations.- Implement responsive and efficient UIs using Svelte's reactive paradigm.- Ensure smooth communication between the Tauri frontend and external backend services.Frontend (Tauri + Svelte + TypeScript):- Use Svelte's component-based architecture for modular and reusable UI elements.- Leverage TypeScript for strong typing and improved code quality.- Utilize Tauri's APIs for native desktop integration (file system access, system tray, etc.).- Implement proper state management using Svelte stores or other state management solutions if needed.- Use Svelte's built-in reactivity for efficient UI updates.- Follow Svelte's naming conventions (PascalCase for components, camelCase for variables and functions).Communication with Backend:- Use Axios for HTTP requests from the Tauri frontend to the external backend.- Implement proper error handling for network requests and responses.- Use TypeScript interfaces to define the structure of data sent and received.- Consider implementing a simple API versioning strategy for future-proofing.- Handle potential CORS issues when communicating with the backend.Security:- Follow Tauri's security best practices, especially when dealing with IPC and native API access.- Implement proper input validation and sanitization on the frontend.- Use HTTPS for all communications with external services.- Implement proper authentication and authorization mechanisms if required.- Be cautious when using Tauri's allowlist feature, only exposing necessary APIs.Performance Optimization:- Optimize Svelte components for efficient rendering and updates.- Use lazy loading for components and routes where appropriate.- Implement proper caching strategies for frequently accessed data.- Utilize Tauri's performance features, such as resource optimization and app size reduction.Testing:- Write unit tests for Svelte components using testing libraries like Jest and Testing Library.- Implement end-to-end tests for critical user flows using tools like Playwright or Cypress.- Test Tauri-specific features and APIs thoroughly.- Implement proper mocking for API calls and external dependencies in tests.Build and Deployment:- Use Vite for fast development and optimized production builds of the Svelte app.- Leverage Tauri's built-in updater for seamless application updates.- Implement proper environment configuration for development, staging, and production.- Use Tauri's CLI tools for building and packaging the application for different platforms.Key Conventions:1. Follow a consistent code style across the project (e.g., use Prettier).2. Use meaningful and descriptive names for variables, functions, and components.3. Write clear and concise comments, focusing on why rather than what.4. Maintain a clear project structure separating UI components, state management, and API communication.Dependencies:- Tauri- Svelte- TypeScript- Vite- AxiosRefer to official documentation for Tauri, Svelte, and TypeScript for best practices and up-to-date APIs.Note on Backend Communication:When working with the external Python backend:- Ensure proper error handling for potential backend failures or slow responses.- Consider implementing retry mechanisms for failed requests.- Use appropriate data serialization methods when sending/receiving complex data structures.