chore: add CI/CD workflows and Docker support for frontend & WebSocket

Author: coderomm

.dockerignore

@@ -0,0 +1 @@
+node_modules

.github/workflows/cd_frontend.yml

@@ -0,0 +1,27 @@
+name: Deploy the frontend
+on:
+  push:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v2
+
+      - name: Docker login
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./docker/Dockerfile.frontend
+          build-args:
+            - DATABASE_URL=${{ secrets.DATABASE_URL }}
+          push: true
+          tags: coderomm/collabydraw:${{ github.sha }}
+      ## Step to deploy this to a VM

.github/workflows/cd_ws.yml

@@ -0,0 +1,29 @@
+name: Deploy the websocket server
+on:
+  push:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v2
+
+      - name: Docker login
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./docker/Dockerfile.websocket
+          push: true
+          tags: coderomm/collabydraw-websocket:${{ github.sha }}
+      - name: Deploy to the VM
+        run: |
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" &> ~/ssh_key
+          chmod 700 /home/runner/ssh_key
+          ssh -o StrictHostKeyChecking=no -i ~/ssh_key [email protected] -t "docker stop user_backend && docker run --name user_backend -d -p 8080:8080 coderomm/collabydraw-websocket:${{ github.sha }}"

apps/ws/package.json

@@ -8,7 +8,6 @@
     "dev": "pnpm run build && pnpm run start"
   },
   "devDependencies": {
-    "@repo/backend-common": "workspace:*",
     "@repo/common": "workspace:*",
     "@repo/db": "workspace:*",
     "@repo/typescript-config": "workspace:*",

docker-compose.yml

@@ -0,0 +1,39 @@
+# docker-compose.yml
+version: '3.8'
+
+services:
+  frontend:
+    build:
+      context: ./apps/collabydraw
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - websocket
+      - database
+
+  websocket:
+    build:
+      context: ./apps/ws
+      dockerfile: Dockerfile
+    ports:
+      - "8080:8080"
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - database
+
+  database:
+    image: postgres:13-alpine
+    environment:
+      POSTGRES_DB: collabydraw
+      POSTGRES_PASSWORD: your_secure_password
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+
+volumes:
+  postgres-data:

docker/Dockerfile.frontend

@@ -0,0 +1,33 @@
+FROM node:20-alpine AS base
+
+# Install pnpm
+RUN npm install -g pnpm
+
+WORKDIR /usr/src/app
+
+# Add ARG for DATABASE_URL
+ARG DATABASE_URL
+ENV DATABASE_URL=${DATABASE_URL}
+
+# Copy necessary files for dependency installation
+COPY ./packages ./packages
+COPY ./package.json ./package.json
+COPY ./pnpm-lock.yaml ./pnpm-lock.yaml
+COPY ./turbo.json ./turbo.json
+COPY ./apps/frontend ./apps/frontend
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Generate database
+# add this "db:generate": "cd packages/db && bunx prisma generate && cd ../..",
+RUN pnpm run db:generate
+
+# Build the application with database URL
+RUN DATABASE_URL=${DATABASE_URL} pnpm run build
+
+# Expose the port
+EXPOSE 3000
+
+# Start the web application
+CMD ["pnpm", "run", "start:web"]

docker/Dockerfile.websocket

@@ -0,0 +1,25 @@
+FROM node:20-alpine AS base
+
+# Install pnpm
+RUN npm install -g pnpm
+
+WORKDIR /usr/src/app
+
+# Copy necessary files for dependency installation
+COPY ./packages ./packages
+COPY ./package.json ./package.json
+COPY ./pnpm-lock.yaml ./pnpm-lock.yaml
+COPY ./turbo.json ./turbo.json
+COPY ./apps/ws ./apps/ws
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Generate database (assuming you have a db:generate script)
+RUN pnpm run db:generate
+
+# Expose the port
+EXPOSE 8081
+
+# Start the ws service
+CMD ["pnpm", "run", "start:ws"]

package.json

@@ -5,7 +5,10 @@
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "db:generate": "cd packages/db && prisma generate && cd ../..",
+    "start:collabydraw": "cd apps/collabydraw && pnpm run start",
+    "start:ws": "cd apps/ws && pnpm run build"
   },
   "devDependencies": {
     "prettier": "^3.5.0",

packages/db/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@repo/typescript-config": "workspace:*",
     "@types/node": "^22.13.1",
-    "prisma": "^6.3.1"
+    "prisma": "^6.5.0"
   },
   "dependencies": {
     "@prisma/client": "6.3.1"