Open this project in VS Code
Install the "Dev Containers" extension if you haven't already
Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) and select "Dev Containers: Reopen in Container"
Wait for the container to build and initialize
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

mix phx.server

The server will be available at http://localhost:4000

Database Operations

# Reset database
mix ecto.reset

# Create migration
mix ecto.gen.migration migration_name

# Run migrations
mix ecto.migrate

# Rollback migration
mix ecto.rollback

Testing

# 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

# 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