# Development Container Setup

This devcontainer provides a complete Elixir Phoenix development environment with all necessary tools and dependencies pre-installed.

## What's Included

- **Elixir 1.15** with OTP 26
- **Phoenix Framework** (latest)
- **Node.js 20** for asset compilation
- **PostgreSQL 15** database
- **VS Code Extensions** for Elixir/Phoenix development
- **Development tools**: Git, build tools, inotify-tools

## Quick Start

1. Open this project in VS Code
2. Install the "Dev Containers" extension if you haven't already
3. Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac) and select "Dev Containers: Reopen in Container"
4. Wait for the container to build and initialize
5. The setup script will automatically run to configure your environment

## What Happens During Setup

The `setup.sh` script automatically:
- Installs Elixir dependencies (`mix deps.get`)
- Installs Node.js dependencies for assets
- Creates and migrates the database
- Runs database seeds (if available)
- Compiles the project

## Development Workflow

### Starting the Phoenix Server
```bash
mix phx.server
```
The server will be available at http://localhost:4000

### Database Operations
```bash
# Reset database
mix ecto.reset

# Create migration
mix ecto.gen.migration migration_name

# Run migrations
mix ecto.migrate

# Rollback migration
mix ecto.rollback
```

### Testing
```bash
# Run all tests
mix test

# Run specific test file
mix test test/path/to/test_file.exs

# Run tests with coverage
mix test --cover
```

### Asset Management
```bash
# Install new npm packages
cd assets && npm install package-name && cd ..

# Build assets for production
mix assets.deploy
```

## VS Code Extensions Included

- **ElixirLS** - Language server for Elixir
- **Phoenix Framework** - Phoenix-specific tooling
- **Tailwind CSS IntelliSense** - CSS utility suggestions
- **Prettier** - Code formatting
- **GitHub Copilot** - AI-powered code completion
- **Auto Rename Tag** - HTML tag synchronization

## Environment Variables

The following environment variables are pre-configured:
- `MIX_ENV=dev`
- `PHX_SERVER=true`
- `DATABASE_URL=ecto://postgres:postgres@db:5432/components_elixir_dev`

## Ports

The following ports are forwarded to your local machine:
- **4000** - Phoenix web server
- **5433** - PostgreSQL database (mapped to avoid conflicts with host PostgreSQL)

## Persistent Storage

The following directories are stored in Docker volumes for better performance:
- `_build/` - Compiled Elixir code
- `deps/` - Elixir dependencies
- `assets/node_modules/` - Node.js dependencies
- PostgreSQL data

## Troubleshooting

### Container won't start
- Make sure Docker is running
- Try rebuilding the container: "Dev Containers: Rebuild Container"

### Port conflicts
- If you get "port is already allocated" errors, make sure no other containers are using the same ports
- Stop existing containers: `docker-compose down`
- The devcontainer uses port 5433 for PostgreSQL to avoid conflicts with host installations

### Database connection issues
- Ensure the database service is running: `docker-compose ps`
- Check database logs: `docker-compose logs db`

### Permission issues
- The container runs as user `vscode` (UID 1000)
- If you encounter permission issues, rebuild the container

### Dependencies not installing
- Try running `mix deps.clean --all && mix deps.get`
- For Node.js: `cd assets && rm -rf node_modules && npm install`

## Customization

You can customize the development environment by:
- Modifying `.devcontainer/devcontainer.json` for VS Code settings
- Updating `.devcontainer/Dockerfile` for additional system packages
- Editing `.devcontainer/docker-compose.yml` for service configuration
- Adding to `.devcontainer/setup.sh` for additional setup steps