feat: Dockerized the app

Author: nirabo

.dockerignore

@@ -0,0 +1,33 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Build output
+dist
+coverage
+
+# Environment and config
+.env*
+.git
+.gitignore
+.dockerignore
+.eslintrc*
+.prettierrc*
+.eslintignore
+.prettierignore
+
+# Docker
+Dockerfile
+docker-compose.yml
+
+# IDE
+.vscode
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile

@@ -1,25 +1,42 @@
-# Build stage
-FROM node:20-alpine as builder
+# Base stage for shared configuration
+FROM node:20-alpine as base
 
 WORKDIR /app
 
 # Install pnpm
 RUN corepack enable && corepack prepare pnpm@latest --activate
 
+# Development stage for hot reloading
+FROM base as dev
+
 # Copy package files
 COPY package.json pnpm-lock.yaml ./
 
-# Install dependencies
-RUN pnpm install --frozen-lockfile
+# Install all dependencies including devDependencies
+ENV SKIP_HUSKY=1
+RUN pnpm install --ignore-scripts
+
+# The source code will be mounted as a volume in docker-compose
+
+# Build stage for production build
+FROM base as builder
+
+# Copy package files first
+COPY package.json pnpm-lock.yaml ./
 
 # Copy source code
 COPY . .
 
-# Build the application
-RUN pnpm build
+# Install dependencies and build
+ENV SKIP_HUSKY=1
+RUN pnpm install --frozen-lockfile --ignore-scripts && \
+    NODE_ENV=production pnpm build && \
+    rm -rf src/test && \
+    pnpm prune --prod && \
+    rm -rf node_modules/.cache
 
-# Production stage
-FROM nginx:alpine
+# Production stage with nginx
+FROM nginx:alpine as production
 
 # Copy built assets from builder stage
 COPY --from=builder /app/dist /usr/share/nginx/html

README.md

@@ -121,7 +121,7 @@ You can run this application using Docker in both development and production mod
 - Docker
 - Docker Compose
 
-### Development
+### Development (Default)
 
 1. Copy the environment file:
    ```bash
@@ -132,19 +132,33 @@ You can run this application using Docker in both development and production mod
 
 3. Start the development container:
    ```bash
-   docker compose up dev
+   docker compose up
    ```
 
-The development server will be available at http://localhost:3000
+The development server will be available at http://localhost:5173
 
 ### Production
 
 1. Build and start the production container:
    ```bash
-   docker compose up prod -d
+   docker compose --profile prod up -d
    ```
 
-The production build will be available at http://localhost:80
+The production build will be available at http://localhost:5080
+
+### Docker Profiles
+
+The project uses Docker Compose profiles to separate development and production configurations:
+
+- Development (default): `docker compose up`
+  - Hot reloading enabled
+  - Source code mounted as volume
+  - Runs on port 5173
+
+- Production: `docker compose --profile prod up`
+  - Optimized production build
+  - Served via Nginx
+  - Runs on port 5080
 
 ### Environment Variables
 

docker-compose.yml

@@ -1,24 +1,42 @@
+name: terminal-portfolio
+
 services:
-  # Development service
+  # Development service (default profile)
   dev:
     build:
       context: .
-      target: builder
+      target: dev
     command: pnpm dev
     ports:
-      - "3000:3000"
+      - "5173:5173" # Vite's default port
     volumes:
       - .:/app
       - /app/node_modules
     environment:
       - NODE_ENV=development
       - VITE_CONFIG_GIST_URL=${VITE_CONFIG_GIST_URL}
+    profiles: ["dev"]
+    # Enable hot reload
+    develop:
+      watch:
+        - path: ./package.json
+          action: rebuild
+        - path: ./pnpm-lock.yaml
+          action: rebuild
 
   # Production service
   prod:
-    build: .
+    build:
+      context: .
+      target: production
     ports:
-      - "80:80"
+      - "5080:80"
     environment:
       - NODE_ENV=production
       - VITE_CONFIG_GIST_URL=${VITE_CONFIG_GIST_URL}
+    profiles: ["prod"]
+    restart: unless-stopped
+
+# Set default profile to dev
+x-profiles:
+  dev: true

nginx.conf

@@ -9,18 +9,24 @@ server {
     gzip_vary on;
     gzip_min_length 10240;
     gzip_proxied expired no-cache no-store private auth;
-    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
     gzip_disable "MSIE [1-6]\.";
 
-    # Serve static files
+    # SPA configuration
     location / {
         try_files $uri $uri/ /index.html;
-        add_header Cache-Control "public, no-cache";
+        add_header Cache-Control "no-cache";
     }
 
-    # Cache static assets
-    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
+    # Static assets
+    location /assets {
         expires 1y;
-        add_header Cache-Control "public, no-transform";
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Health check
+    location /health {
+        access_log off;
+        return 200 'healthy\n';
     }
 }

package.json

@@ -9,7 +9,7 @@
     "test:once": "NODE_OPTIONS='--no-deprecation' vitest run",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "prepare": "husky install",
+    "prepare": "[ -n \"$SKIP_HUSKY\" ] || husky install",
     "lint": "eslint .",
     "format:check": "prettier --check .",
     "format": "prettier --write ."
@@ -59,5 +59,6 @@
     "*.{json,yml,yaml,md}": [
       "prettier --write"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.93e57b0126f0df74ce6bff29680394c0ba54ec47246b9cf321f0121d8d9bb03f750a705f24edc3c1180853afd7c2c3b94196d0a3d53d3e069d9e2793ef11f321"
 }