build(elixir): add dev container

.devcontainer/README.md

@@ -0,0 +1,134 @@
+# 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