# Development Environment

This guide covers the configuration of development tools and environment settings for optimal PatternFly React development.

## Introduction

A properly configured development environment enhances productivity and ensures consistent code quality when working with PatternFly React applications. This guide covers IDE setup, debugging tools, and development workflow optimization.

## Related Files

- [**Setup Guide**](./README.md) - Initial project setup
- [**Quick Start**](./quick-start.md) - Project initialization steps
- [**Styling Standards**](../guidelines/styling-standards.md) - CSS and styling configuration

## Development Server Configuration

### Default Configuration
- **Port**: `9000` (default for PatternFly React Seed)
- **Hot Reload**: Enabled by default
- **Source Maps**: Available for debugging
- **Proxy Settings**: Configurable for API integration

### Server Management
```bash
# Start development server
npm run start:dev

# Start in background (recommended for AI development)
npm run start:dev &

# Stop server (if running in foreground)
Ctrl+C
```

### Environment Variables
Create a `.env` file in the project root for environment-specific settings:
```env
# Development server port
PORT=9000

# API endpoint configuration
REACT_APP_API_URL=http://localhost:3001

# Enable/disable specific features
REACT_APP_DEBUG_MODE=true
```

## IDE and Editor Configuration

### Recommended Extensions (VS Code)
- **ES7+ React/Redux/React-Native snippets**: React development shortcuts
- **Auto Rename Tag**: Automatic HTML/JSX tag renaming
- **Bracket Pair Colorizer**: Visual bracket matching
- **GitLens**: Enhanced Git integration
- **Prettier**: Code formatting
- **ESLint**: Code linting

### TypeScript Configuration
If using TypeScript with PatternFly:
```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}
```

## Debugging Configuration

### Browser DevTools Setup
1. **React Developer Tools**: Install browser extension for React debugging
2. **PatternFly DevTools**: Use browser inspector to examine PatternFly classes
3. **Network Tab**: Monitor API calls and resource loading
4. **Console**: Check for PatternFly-specific warnings or errors

### VS Code Debugging
Create `.vscode/launch.json` for debugging:
```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:9000",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
```

## Build and Testing Environment

### Build Scripts
```bash
# Development build
npm run build:dev

# Production build
npm run build

# Analyze bundle size
npm run analyze
```

### Testing Configuration
```bash
# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch
```

## Package Management

### Dependency Management
- **Core Dependencies**: PatternFly React components
- **Peer Dependencies**: React, React-DOM
- **Dev Dependencies**: Build tools, testing utilities

### Version Compatibility
Ensure compatible versions between:
- React and PatternFly React
- PatternFly Core CSS and PatternFly React
- Node.js and npm versions

### Update Strategy
```bash
# Check for outdated packages
npm outdated

# Update PatternFly packages
npm update @patternfly/react-core @patternfly/react-table

# Verify compatibility after updates
npm test
```

## Performance Optimization

### Development Performance
- **Code Splitting**: Implement lazy loading for large components
- **Bundle Analysis**: Regular bundle size monitoring
- **Memory Management**: Monitor for memory leaks during development

### Hot Module Replacement (HMR)
- Enabled by default in PatternFly React Seed
- Preserves component state during development
- Faster development iteration cycles

## Environment-Specific Configuration

### Development Environment
- Source maps enabled
- Detailed error messages
- Hot reloading active
- Debug mode available

### Production Environment
- Minified bundles
- Optimized assets
- Error boundaries
- Performance monitoring

## Workflow Integration

### Git Hooks
Set up pre-commit hooks for code quality:
```json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
```

### Continuous Integration
Configure CI/CD for:
- Automated testing
- Build verification
- Dependency security scanning
- Performance regression testing

## Troubleshooting Development Environment

### Common Issues
- **Port conflicts**: Change port in package.json or environment variables
- **Memory issues**: Increase Node.js memory limit
- **Slow builds**: Optimize webpack configuration
- **Hot reload failures**: Clear cache and restart development server

### Performance Monitoring
- Monitor build times
- Track bundle size changes
- Profile component rendering
- Analyze network requests

## Best Practices

1. **Keep dependencies updated** but test thoroughly
2. **Use environment variables** for configuration
3. **Enable source maps** for debugging
4. **Configure linting and formatting** for consistency
5. **Set up proper debugging tools** for efficient development
6. **Monitor performance** during development
7. **Use version control** for environment configuration files