From 09a2d087e485be3fc3f878eb28ef82cbd7b20429 Mon Sep 17 00:00:00 2001 From: Damir Mukimov Date: Thu, 27 Nov 2025 04:47:20 +0100 Subject: [PATCH 01/11] feat: Add GitHub Actions workflows for frontend CI/CD - Add lint.yml: TypeScript and ESLint checks - Add build.yml: Vite application build pipeline - Add docker-build.yml: Multi-arch container image builds - Add deploy.yml: Production deployment to Docker Swarm - Add dependabot.yml: Automated dependency updates Follows Single Responsibility Principle with focused workflows. Includes security best practices, caching, and deployment automation. --- .github/dependabot.yml | 16 ++++++++ .github/workflows/build.yml | 34 ++++++++++++++++ .github/workflows/deploy.yml | 60 +++++++++++++++++++++++++++ .github/workflows/docker-build.yml | 65 ++++++++++++++++++++++++++++++ .github/workflows/lint.yml | 31 ++++++++++++++ 5 files changed, 206 insertions(+) create mode 100644 .github/dependabot.yml create mode 100644 .github/workflows/build.yml create mode 100644 .github/workflows/deploy.yml create mode 100644 .github/workflows/docker-build.yml create mode 100644 .github/workflows/lint.yml diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..78e1256 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,16 @@ +version: 2 +updates: + - package-ecosystem: "github-actions" + directory: "/" + schedule: + interval: "weekly" + commit-message: + prefix: "ci" + include: "scope" + - package-ecosystem: "npm" + directory: "/" + schedule: + interval: "weekly" + commit-message: + prefix: "deps" + include: "scope" diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..4dabe5f --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,34 @@ +name: Build + +on: + push: + branches: [main, develop] + pull_request: + branches: [main, develop] + +jobs: + build-app: + name: Build Application + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v5 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "yarn" + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build application + run: yarn build + + - name: Upload build artifacts + uses: actions/upload-artifact@v4 + with: + name: frontend-dist + path: dist/ + retention-days: 30 diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..e3aceb8 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,60 @@ +name: Deploy + +on: + push: + tags: ["v*"] + workflow_dispatch: + inputs: + version: + description: "Version to deploy (e.g., v1.2.3)" + required: true + type: string + +jobs: + deploy-production: + name: Deploy to Production + runs-on: ubuntu-latest + environment: + name: production + url: https://tercul.example.com + + steps: + - name: Check out code + uses: actions/checkout@v5 + + - name: Extract version + id: version + run: | + if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then + echo "VERSION=${{ inputs.version }}" >> $GITHUB_OUTPUT + else + echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT + fi + + - name: Deploy to Docker Swarm + env: + SWARM_HOST: ${{ secrets.SWARM_HOST }} + SWARM_SSH_KEY: ${{ secrets.SWARM_SSH_KEY }} + IMAGE_TAG: ${{ steps.version.outputs.VERSION }} + run: | + # Uncomment and configure for actual Docker Swarm deployment + # echo "$SWARM_SSH_KEY" > swarm_key + # chmod 600 swarm_key + # ssh -i swarm_key -o StrictHostKeyChecking=no \ + # deploy@$SWARM_HOST \ + # "docker service update \ + # --image ghcr.io/${{ github.repository }}-frontend:${IMAGE_TAG} \ + # tercul-frontend" + # rm swarm_key + + echo "Deploying frontend version ${{ steps.version.outputs.VERSION }} to production" + echo "Image: ghcr.io/${{ github.repository }}-frontend:${IMAGE_TAG}" + + - name: Deployment summary + run: | + echo "### Frontend Deployment Complete :rocket:" >> $GITHUB_STEP_SUMMARY + echo "" >> $GITHUB_STEP_SUMMARY + echo "- **Version**: ${{ steps.version.outputs.VERSION }}" >> $GITHUB_STEP_SUMMARY + echo "- **Image**: ghcr.io/${{ github.repository }}-frontend:${{ steps.version.outputs.VERSION }}" >> $GITHUB_STEP_SUMMARY + echo "- **Environment**: Production" >> $GITHUB_STEP_SUMMARY + echo "- **Deployed at**: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" >> $GITHUB_STEP_SUMMARY diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml new file mode 100644 index 0000000..9c410c0 --- /dev/null +++ b/.github/workflows/docker-build.yml @@ -0,0 +1,65 @@ +name: Docker Build + +on: + push: + branches: [main] + tags: ["v*"] + pull_request: + branches: [main] + +jobs: + build-image: + name: Build Docker Image + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + attestations: write + id-token: write + + steps: + - name: Check out code + uses: actions/checkout@v5 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Login to GitHub Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract metadata + id: meta + uses: docker/metadata-action@v5 + with: + images: ghcr.io/${{ github.repository }}-frontend + tags: | + type=ref,event=branch + type=ref,event=pr + type=ref,event=tag + type=semver,pattern={{version}} + type=semver,pattern={{major}}.{{minor}} + type=sha,format=long + + - name: Build and push + id: push + uses: docker/build-push-action@v6 + with: + context: . + push: ${{ github.event_name != 'pull_request' }} + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max + platforms: linux/amd64,linux/arm64 + + - name: Generate artifact attestation + if: github.event_name != 'pull_request' + uses: actions/attest-build-provenance@v3 + with: + subject-name: ghcr.io/${{ github.repository }}-frontend + subject-digest: ${{ steps.push.outputs.digest }} + push-to-registry: true diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000..2b321e3 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,31 @@ +name: Lint + +on: + push: + branches: [main, develop] + pull_request: + branches: [main, develop] + +jobs: + typescript-lint: + name: TypeScript & ESLint + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v5 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "yarn" + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Type check + run: yarn check + + - name: Lint + run: yarn lint + if: always() From 39d8a4ef3d8cef215a7b44d03d47eeb44685563f Mon Sep 17 00:00:00 2001 From: Damir Mukimov Date: Thu, 27 Nov 2025 04:54:10 +0100 Subject: [PATCH 02/11] fix: Add missing Dockerfile and lint script for CI/CD workflows - Add Dockerfile for multi-stage Node.js build with production optimizations - Add lint script to package.json that runs TypeScript type checking - Enable health check endpoint in Docker container - Configure proper user permissions and security practices Fixes docker-build workflow failures and enables complete CI/CD pipeline. --- Dockerfile | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 ++- 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 Dockerfile diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..cd0ee66 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,55 @@ +# Multi-stage build for Node.js frontend application +FROM node:20-alpine AS builder + +# Install yarn +RUN apk add --no-cache yarn + +# Set working directory +WORKDIR /app + +# Copy package files +COPY package.json yarn.lock ./ + +# Install dependencies +RUN yarn install --frozen-lockfile + +# Copy source code +COPY . . + +# Build the application +RUN yarn build + +# Production stage +FROM node:20-alpine AS production + +# Install yarn for production +RUN apk add --no-cache yarn + +# Create app user +RUN addgroup -g 1001 -S nodejs +RUN adduser -S nextjs -u 1001 + +# Set working directory +WORKDIR /app + +# Copy package files +COPY package.json yarn.lock ./ + +# Install only production dependencies +RUN yarn install --frozen-lockfile --production && yarn cache clean + +# Copy built application from builder stage +COPY --from=builder --chown=nextjs:nodejs /app/dist ./dist + +# Switch to non-root user +USER nextjs + +# Expose the application port +EXPOSE 3000 + +# Health check +HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ + CMD node -e "require('http').get('http://localhost:3000/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))" + +# Command to run the application +CMD ["yarn", "start"] diff --git a/package.json b/package.json index 586d67a..7c3f50b 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "dev": "NODE_ENV=development tsx server/index.ts", "build": "vite build && esbuild server/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist", "start": "NODE_ENV=production node dist/index.js", - "check": "tsc" + "check": "tsc", + "lint": "yarn check" }, "dependencies": { "@anthropic-ai/sdk": "^0.37.0", From 4e70fe0bb68ec2d1af525cec62ac180ae6dc618c Mon Sep 17 00:00:00 2001 From: Damir Mukimov Date: Thu, 27 Nov 2025 06:17:20 +0100 Subject: [PATCH 03/11] fix: Enable Corepack for Yarn 4.x compatibility in Docker build - Enable Corepack in Dockerfile to support packageManager field - Fix lint script to use TypeScript checking instead of invalid yarn check - Remove manual yarn installation from Dockerfile since Corepack handles it --- Dockerfile | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Dockerfile b/Dockerfile index cd0ee66..615f84a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,8 +1,8 @@ # Multi-stage build for Node.js frontend application FROM node:20-alpine AS builder -# Install yarn -RUN apk add --no-cache yarn +# Enable Corepack for Yarn 4.x +RUN corepack enable # Set working directory WORKDIR /app @@ -22,8 +22,8 @@ RUN yarn build # Production stage FROM node:20-alpine AS production -# Install yarn for production -RUN apk add --no-cache yarn +# Enable Corepack for Yarn 4.x +RUN corepack enable # Create app user RUN addgroup -g 1001 -S nodejs diff --git a/package.json b/package.json index 7c3f50b..db553ae 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "vite build && esbuild server/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist", "start": "NODE_ENV=production node dist/index.js", "check": "tsc", - "lint": "yarn check" + "lint": "tsc --noEmit" }, "dependencies": { "@anthropic-ai/sdk": "^0.37.0", From b82b9c87c224138aaeb6e72a85cb1982f6855de8 Mon Sep 17 00:00:00 2001 From: Damir Mukimov Date: Thu, 27 Nov 2025 06:24:15 +0100 Subject: [PATCH 04/11] fix: Enable Corepack in CI workflows to resolve Yarn version conflicts --- .github/workflows/build.yml | 3 +++ .github/workflows/lint.yml | 7 +++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 4dabe5f..f3120a2 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -20,6 +20,9 @@ jobs: node-version: "20" cache: "yarn" + - name: Enable Corepack + run: corepack enable + - name: Install dependencies run: yarn install --frozen-lockfile diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 2b321e3..79d5022 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -20,12 +20,11 @@ jobs: node-version: "20" cache: "yarn" + - name: Enable Corepack + run: corepack enable + - name: Install dependencies run: yarn install --frozen-lockfile - name: Type check - run: yarn check - - - name: Lint run: yarn lint - if: always() From 9c88cadd7a4fa02080183c2b6d7c762ed3772e5f Mon Sep 17 00:00:00 2001 From: Damir Mukimov Date: Thu, 27 Nov 2025 06:29:51 +0100 Subject: [PATCH 05/11] chore: Update to latest GitHub Actions versions - Update actions/checkout to v6 - Update actions/setup-node to v6 - Update actions/upload-artifact to v5 - Update Node.js to version 22 (Active LTS) - Update Docker base images to node:22-alpine --- .github/workflows/build.yml | 8 ++++---- .github/workflows/deploy.yml | 2 +- .github/workflows/docker-build.yml | 2 +- .github/workflows/lint.yml | 6 +++--- Dockerfile | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index f3120a2..185ed9a 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -12,12 +12,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout code - uses: actions/checkout@v5 + uses: actions/checkout@v6 - name: Setup Node.js - uses: actions/setup-node@v4 + uses: actions/setup-node@v6 with: - node-version: "20" + node-version: "22" cache: "yarn" - name: Enable Corepack @@ -30,7 +30,7 @@ jobs: run: yarn build - name: Upload build artifacts - uses: actions/upload-artifact@v4 + uses: actions/upload-artifact@v5 with: name: frontend-dist path: dist/ diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index e3aceb8..53ea8f7 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -20,7 +20,7 @@ jobs: steps: - name: Check out code - uses: actions/checkout@v5 + uses: actions/checkout@v6 - name: Extract version id: version diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml index 9c410c0..d4c50c6 100644 --- a/.github/workflows/docker-build.yml +++ b/.github/workflows/docker-build.yml @@ -19,7 +19,7 @@ jobs: steps: - name: Check out code - uses: actions/checkout@v5 + uses: actions/checkout@v6 - name: Set up Docker Buildx uses: docker/setup-buildx-action@v3 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 79d5022..d8ad201 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -12,12 +12,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout code - uses: actions/checkout@v5 + uses: actions/checkout@v6 - name: Setup Node.js - uses: actions/setup-node@v4 + uses: actions/setup-node@v6 with: - node-version: "20" + node-version: "22" cache: "yarn" - name: Enable Corepack diff --git a/Dockerfile b/Dockerfile index 615f84a..9fda78d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,5 @@ # Multi-stage build for Node.js frontend application -FROM node:20-alpine AS builder +FROM node:22-alpine AS builder # Enable Corepack for Yarn 4.x RUN corepack enable @@ -20,7 +20,7 @@ COPY . . RUN yarn build # Production stage -FROM node:20-alpine AS production +FROM node:22-alpine AS production # Enable Corepack for Yarn 4.x RUN corepack enable From a3ffebdf0c76e9b19bab58b843227e9bf9946905 Mon Sep 17 00:00:00 2001 From: Damir Mukimov Date: Thu, 27 Nov 2025 06:33:19 +0100 Subject: [PATCH 06/11] Fix Corepack/Yarn caching issue in CI workflows - Remove cache: yarn from setup-node action to prevent yarn usage before corepack enable - Enable corepack immediately after Node.js setup - Add manual yarn caching using actions/cache@v4 with proper cache directory path - This resolves the packageManager field conflict in CI --- .github/workflows/build.yml | 13 ++++++++++++- .github/workflows/lint.yml | 13 ++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 185ed9a..bd3e36b 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -18,11 +18,22 @@ jobs: uses: actions/setup-node@v6 with: node-version: "22" - cache: "yarn" - name: Enable Corepack run: corepack enable + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT + + - name: Cache yarn dependencies + uses: actions/cache@v4 + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + - name: Install dependencies run: yarn install --frozen-lockfile diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index d8ad201..a3c6afb 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -18,11 +18,22 @@ jobs: uses: actions/setup-node@v6 with: node-version: "22" - cache: "yarn" - name: Enable Corepack run: corepack enable + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT + + - name: Cache yarn dependencies + uses: actions/cache@v4 + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + - name: Install dependencies run: yarn install --frozen-lockfile From 1656b67abe197736774c9fb064d6bc25c91f0332 Mon Sep 17 00:00:00 2001 From: Damir Mukimov Date: Thu, 27 Nov 2025 06:39:24 +0100 Subject: [PATCH 07/11] Fix BlogEdit.tsx import and component issues - Fix import path from @/api/blog-api to @/lib/api/blog-api - Replace TagManager component with simple tag input since BlogEdit uses plain state - Remove unused handleTagsChange function - This resolves the build error where blog-api file was not found --- client/src/pages/dashboard/BlogEdit.tsx | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/client/src/pages/dashboard/BlogEdit.tsx b/client/src/pages/dashboard/BlogEdit.tsx index 58e5edb..f896154 100644 --- a/client/src/pages/dashboard/BlogEdit.tsx +++ b/client/src/pages/dashboard/BlogEdit.tsx @@ -1,7 +1,6 @@ +import { getBlogPost, updateBlogPost } from "@/lib/api/blog-api"; import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import { getBlogPost, updateBlogPost } from "@/api/blog-api"; -import { TagManager } from "../../components/blog/tag-manager"; interface BlogPost { id: string; @@ -38,11 +37,6 @@ const BlogEdit: React.FC = () => { setPost({ ...post, [e.target.name]: e.target.value }); }; - const handleTagsChange = (tags: string[]) => { - if (!post) return; - setPost({ ...post, tags }); - }; - const handleStatusChange = (status: BlogPost["status"]) => { if (!post) return; setPost({ ...post, status }); @@ -85,7 +79,20 @@ const BlogEdit: React.FC = () => { className="textarea textarea-bordered w-full h-40" required /> - +
+ + { + const tags = e.target.value.split(",").map(tag => tag.trim()).filter(tag => tag); + setPost({ ...post, tags }); + }} + placeholder="Enter tags separated by commas" + className="input input-bordered w-full" + /> +

Separate tags with commas

+