Create containerized development setup for safe and consistent frontend development: Docker Configuration: - docker-compose.yml: Root-level orchestration with frontend service - frontend/Dockerfile.dev: Node.js 20 Alpine optimized for dev - Volume mounts for Hot Module Replacement (HMR) - Named volume for node_modules to avoid conflicts - Health check to verify service availability - Environment variables for file watching (CHOKIDAR_USEPOLLING) Vite Configuration Update: - vite.config.ts: Add server config for Docker compatibility - host: '0.0.0.0' to accept external connections - usePolling: true for file watching in container - port: 5173 explicitly configured Documentation: - README.md: Add Docker development procedure section - Document docker compose up -d workflow - Explain HMR and hot-reload capabilities - List advantages of Docker-based development Usage: docker compose up -d # Start development server docker compose logs -f # View logs docker compose down # Stop container Access: http://localhost:5173 Safety First: - Isolated environment prevents system conflicts - Reproducible setup across different machines - No host Node.js installation required - Easy team onboarding Refs: Docker best practices for Node.js development
26 lines
650 B
Docker
26 lines
650 B
Docker
# Dockerfile.dev - Development container for LogWhisperer AI Frontend
|
|
# Optimized for Node.js with Hot Module Replacement (HMR)
|
|
|
|
FROM node:20-alpine
|
|
|
|
# Set working directory
|
|
WORKDIR /app
|
|
|
|
# Install dependencies for file watching (needed for HMR in Docker)
|
|
RUN apk add --no-cache git
|
|
|
|
# Copy package files first (for better caching)
|
|
COPY package*.json ./
|
|
|
|
# Install dependencies
|
|
RUN npm ci
|
|
|
|
# Copy the rest of the application
|
|
COPY . .
|
|
|
|
# Expose port 5173 for Vite dev server
|
|
EXPOSE 5173
|
|
|
|
# Command to run the development server
|
|
# Using --host 0.0.0.0 to allow connections from outside the container
|
|
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"] |