---
description: Development workflow, build processes, and deployment guidelines
---

# Development Workflow and Deployment

## Local Development Setup

### Prerequisites
- **Node.js** 18+ (recommended LTS version)
- **npm** for package management
- **TypeScript** 5.8+
- **Git** for version control

### Getting Started
```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## Build Configuration

### Astro Configuration ([astro.config.mjs](mdc:astro.config.mjs))
- **Astro Version**: 5.12+ with latest features
- **Output**: Server-side rendering (SSR) with Vercel adapter 8.2+
- **Image Service**: Sharp 0.34+ for optimized image processing
- **Integrations**: Sitemap generation for SEO
- **Styling**: Tailwind CSS 4.1+ via Vite plugin
- **i18n**: Configured for 4 languages with Spanish as default

### Package Management ([package.json](mdc:package.json))
- Use **npm** consistently for package management
- Lock file: [package-lock.json](mdc:package-lock.json) should be committed
- Key dependencies: Astro 5.12+, Tailwind CSS 4.1+, Vercel adapter 8.2+
- Keep dependencies updated, especially security patches

## Deployment Strategy

### Vercel Platform
- **Automatic deployments** from main/master branch
- **Preview deployments** for pull requests
- **Image optimization** enabled through Vercel's service
- **Environment variables** configured in Vercel dashboard

### Performance Monitoring
- Web Analytics disabled in config (can be enabled if needed)
- Monitor Core Web Vitals through Vercel dashboard
- Regular lighthouse audits for performance regression

## Code Quality Standards

### File Organization
- Components in `src/components/` with descriptive names
- Pages follow i18n structure in `src/pages/`
- Shared styles in `src/styles/global.css`
- Assets organized by type and purpose

### TypeScript Standards
- Use TypeScript in component frontmatter
- Define proper interfaces for component props
- Leverage Astro's built-in TypeScript support
- Configuration in [tsconfig.json](mdc:tsconfig.json)

### Version Control Best Practices
- Keep main branch production-ready
- Use descriptive commit messages
- Test builds before pushing to main
- Regular commits for iterative development

## SEO and Performance

### Search Engine Optimization
- Sitemap automatically generated via integration
- Proper meta tags in [Layout.astro](mdc:src/layouts/Layout.astro)
- Structured data for event information
- Multi-language sitemap generation

### Performance Optimization
- Image optimization through Astro and Vercel
- Lazy loading for below-the-fold content
- Minimal JavaScript footprint
- Efficient CSS delivery with Tailwind

### Monitoring
- [robots.txt](mdc:public/robots.txt) configured for crawlers
- Social media meta tags (Open Graph)
- Favicon and manifest files in [public/favicon/](mdc:public/favicon/)

## Maintenance Tasks

### Regular Updates
- **Dependencies**: Monthly security and feature updates
- **Content**: Event information and translations
- **Assets**: Optimize and compress new images
- **Performance**: Regular audits and optimizations

### Content Management
- Translation updates across all 4 languages
- Image asset optimization and localization
- Document updates in [public/images/docs/](mdc:public/images/docs/)
- Calendar and event information updates

### Testing Protocol
- Cross-browser compatibility testing
- Mobile responsiveness validation
- Multi-language functionality testing
- Performance regression testing
- Accessibility compliance verification

## Troubleshooting Common Issues

### Build Failures
- Check Node.js version compatibility
- Verify all translation files are complete
- Ensure image assets exist for all referenced paths
- Validate TypeScript compilation

### Deployment Issues
- Verify Vercel configuration
- Check environment variables
- Validate build output size limits
- Monitor function execution times

### Performance Problems
- Audit image optimization settings
- Review JavaScript bundle size
- Check for unused CSS
- Validate caching strategies