feat: add Docker development environment for frontend
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
This commit is contained in:
26
frontend/Dockerfile.dev
Normal file
26
frontend/Dockerfile.dev
Normal file
@@ -0,0 +1,26 @@
|
||||
# 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"]
|
||||
@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
watch: {
|
||||
usePolling: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user