# Docker Deployment Guide

## Production Deployment

### Quick Start
```bash
# Build and run the production container
docker-compose up -d

# Access the app at http://localhost:8080
```

### Manual Build
```bash
# Build the Docker image
docker build -t coastal-timesheet .

# Run the container
docker run -d -p 8080:80 --name coastal-timesheet coastal-timesheet
```

## Development with Docker

### Development Server
```bash
# Run development environment
docker-compose -f docker-compose.dev.yml up

# Access the app at http://localhost:5173
```

## Docker Commands

### Production
```bash
# Start services
docker-compose up -d

# Stop services  
docker-compose down

# View logs
docker-compose logs -f

# Rebuild after changes
docker-compose up -d --build
```

### Development
```bash
# Start dev environment
docker-compose -f docker-compose.dev.yml up

# Stop dev environment
docker-compose -f docker-compose.dev.yml down

# Rebuild dev container
docker-compose -f docker-compose.dev.yml up --build
```

## Configuration

### Environment Variables
- `NODE_ENV`: Set to "production" for production builds
- Port mapping can be changed in docker-compose.yml

### Nginx Configuration
The production container uses nginx to serve static files with:
- Gzip compression enabled
- Client-side routing support (SPA)
- Static asset caching
- Security headers

### Ports
- **Production**: http://localhost:8080
- **Development**: http://localhost:5173

## Architecture

The production setup uses a multi-stage build:
1. **Build stage**: Compiles the React app using Node.js
2. **Production stage**: Serves static files using nginx

This results in a lightweight production image (~25MB) that only contains the compiled app and nginx.