From c63810bca1ae6e1749a003313988915404201089 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Fri, 16 Jan 2026 02:25:22 +0000 Subject: [PATCH] Generated by Spark: GitHub/gitlab/Jenkins/circleci ci cd config --- .circleci/config.yml | 264 ++++++++++++++ .dockerignore | 20 ++ .github/workflows/ci.yml | 241 +++++++++++++ .github/workflows/release.yml | 87 +++++ .gitlab-ci.yml | 177 +++++++++ CI_CD_GUIDE.md | 350 ++++++++++++++++++ Dockerfile | 24 ++ Jenkinsfile | 291 +++++++++++++++ README.md | 13 +- docker-compose.yml | 26 ++ nginx.conf | 28 ++ src/components/DocumentationView.tsx | 516 ++++++++++++++++++++++++++- 12 files changed, 2034 insertions(+), 3 deletions(-) create mode 100644 .circleci/config.yml create mode 100644 .dockerignore create mode 100644 .github/workflows/ci.yml create mode 100644 .github/workflows/release.yml create mode 100644 .gitlab-ci.yml create mode 100644 CI_CD_GUIDE.md create mode 100644 Dockerfile create mode 100644 Jenkinsfile create mode 100644 docker-compose.yml create mode 100644 nginx.conf diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 0000000..05ed14c --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,264 @@ +version: 2.1 + +orbs: + node: circleci/node@5.2.0 + docker: circleci/docker@2.6.0 + slack: circleci/slack@4.13.3 + +executors: + node-executor: + docker: + - image: cimg/node:20.11 + resource_class: large + working_directory: ~/repo + + playwright-executor: + docker: + - image: mcr.microsoft.com/playwright:v1.42.0-focal + resource_class: large + working_directory: ~/repo + +commands: + restore-dependencies: + description: 'Restore npm dependencies from cache' + steps: + - restore_cache: + keys: + - v1-dependencies-{{ checksum "package-lock.json" }} + - v1-dependencies- + + save-dependencies: + description: 'Save npm dependencies to cache' + steps: + - save_cache: + paths: + - node_modules + key: v1-dependencies-{{ checksum "package-lock.json" }} + + notify-slack-on-fail: + description: 'Notify Slack on failure' + steps: + - slack/notify: + event: fail + template: basic_fail_1 + + notify-slack-on-success: + description: 'Notify Slack on success' + steps: + - slack/notify: + event: pass + template: success_tagged_deploy_1 + +jobs: + lint: + executor: node-executor + steps: + - checkout + - restore-dependencies + - run: + name: Install dependencies + command: npm ci + - save-dependencies + - run: + name: Run ESLint + command: npm run lint || echo "No lint script found" + - run: + name: TypeScript type check + command: npx tsc --noEmit + - notify-slack-on-fail + + test: + executor: node-executor + steps: + - checkout + - restore-dependencies + - run: + name: Install dependencies + command: npm ci + - save-dependencies + - run: + name: Run unit tests + command: npm test || echo "No test script found" + - store_test_results: + path: ./junit.xml + - store_artifacts: + path: coverage + destination: coverage + - notify-slack-on-fail + + build: + executor: node-executor + steps: + - checkout + - restore-dependencies + - run: + name: Install dependencies + command: npm ci + - save-dependencies + - run: + name: Build application + command: npm run build + - persist_to_workspace: + root: . + paths: + - dist + - store_artifacts: + path: dist + destination: build + - notify-slack-on-fail + + e2e-test: + executor: playwright-executor + steps: + - checkout + - restore-dependencies + - run: + name: Install dependencies + command: npm ci + - save-dependencies + - attach_workspace: + at: . + - run: + name: Install Playwright browsers + command: npx playwright install chromium + - run: + name: Run E2E tests + command: npm run test:e2e || echo "No E2E tests configured" + - store_test_results: + path: playwright-report + - store_artifacts: + path: playwright-report + destination: e2e-report + - notify-slack-on-fail + + security-scan: + executor: node-executor + steps: + - checkout + - restore-dependencies + - run: + name: Install dependencies + command: npm ci + - save-dependencies + - run: + name: Run npm audit + command: npm audit --audit-level=moderate || true + - run: + name: Install Trivy + command: | + wget -qO - https://aquasecurity.github.io/trivy-repo/deb/public.key | sudo apt-key add - + echo "deb https://aquasecurity.github.io/trivy-repo/deb $(lsb_release -sc) main" | sudo tee -a /etc/apt/sources.list.d/trivy.list + sudo apt-get update + sudo apt-get install trivy -y + - run: + name: Run Trivy scan + command: trivy fs --exit-code 0 --no-progress --format json --output trivy-report.json . + - store_artifacts: + path: trivy-report.json + destination: security/trivy-report.json + - notify-slack-on-fail + + docker-build-and-push: + executor: docker/docker + steps: + - checkout + - setup_remote_docker: + docker_layer_caching: true + - attach_workspace: + at: . + - run: + name: Build Docker image + command: | + docker build -t ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:$CIRCLE_BRANCH . + docker tag ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:$CIRCLE_BRANCH \ + ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:$CIRCLE_BRANCH-$CIRCLE_SHA1 + - run: + name: Push to registry + command: | + echo $DOCKER_PASSWORD | docker login ghcr.io -u $DOCKER_USERNAME --password-stdin + docker push ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:$CIRCLE_BRANCH + docker push ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:$CIRCLE_BRANCH-$CIRCLE_SHA1 + if [ "$CIRCLE_BRANCH" = "main" ]; then + docker tag ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:$CIRCLE_BRANCH \ + ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:latest + docker push ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:latest + fi + - notify-slack-on-fail + + deploy-staging: + executor: node-executor + steps: + - checkout + - run: + name: Deploy to staging + command: | + echo "Deploying to staging environment..." + echo "Image: ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:develop-$CIRCLE_SHA1" + curl -X POST $STAGING_WEBHOOK_URL \ + -H "Content-Type: application/json" \ + -d "{\"image\":\"ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:develop\",\"sha\":\"$CIRCLE_SHA1\"}" + - notify-slack-on-success + - notify-slack-on-fail + + deploy-production: + executor: node-executor + steps: + - checkout + - run: + name: Deploy to production + command: | + echo "Deploying to production environment..." + echo "Image: ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:latest" + curl -X POST $PRODUCTION_WEBHOOK_URL \ + -H "Content-Type: application/json" \ + -d "{\"image\":\"ghcr.io/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME:latest\",\"sha\":\"$CIRCLE_SHA1\"}" + - notify-slack-on-success + - notify-slack-on-fail + +workflows: + version: 2 + build-test-deploy: + jobs: + - lint + - test: + requires: + - lint + - build: + requires: + - test + - e2e-test: + requires: + - build + - security-scan: + requires: + - build + - docker-build-and-push: + requires: + - build + - test + - security-scan + filters: + branches: + only: + - main + - develop + - deploy-staging: + requires: + - docker-build-and-push + filters: + branches: + only: develop + - hold-for-approval: + type: approval + requires: + - docker-build-and-push + - e2e-test + filters: + branches: + only: main + - deploy-production: + requires: + - hold-for-approval + filters: + branches: + only: main diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..093b659 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,20 @@ +node_modules +npm-debug.log +dist +.git +.github +.gitignore +.dockerignore +Dockerfile +docker-compose.yml +*.md +coverage +.env +.env.local +.env.*.local +playwright-report +test-results +.vscode +.idea +*.log +.DS_Store diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..2b737e3 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,241 @@ +name: CI/CD Pipeline + +on: + push: + branches: [main, develop] + pull_request: + branches: [main, develop] + workflow_dispatch: + +env: + NODE_VERSION: '20.x' + REGISTRY: ghcr.io + IMAGE_NAME: ${{ github.repository }} + +jobs: + lint: + name: Lint + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Run ESLint + run: npm run lint --if-present || echo "No lint script found" + + - name: Type check + run: npx tsc --noEmit + + test: + name: Test + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Run unit tests + run: npm test --if-present || echo "No test script found" + + - name: Upload coverage reports + uses: codecov/codecov-action@v4 + if: always() + with: + token: ${{ secrets.CODECOV_TOKEN }} + files: ./coverage/coverage-final.json + flags: unittests + fail_ci_if_error: false + + build: + name: Build + runs-on: ubuntu-latest + needs: [lint, test] + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Build application + run: npm run build + + - name: Upload build artifacts + uses: actions/upload-artifact@v4 + with: + name: dist + path: dist/ + retention-days: 7 + + e2e-tests: + name: E2E Tests + runs-on: ubuntu-latest + needs: build + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Install Playwright browsers + run: npx playwright install --with-deps chromium + + - name: Download build artifacts + uses: actions/download-artifact@v4 + with: + name: dist + path: dist/ + + - name: Run E2E tests + run: npm run test:e2e --if-present || echo "No E2E tests configured" + + - name: Upload test results + uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 7 + + security-scan: + name: Security Scan + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Run npm audit + run: npm audit --audit-level=moderate || true + + - name: Run Trivy vulnerability scanner + uses: aquasecurity/trivy-action@master + with: + scan-type: 'fs' + scan-ref: '.' + format: 'sarif' + output: 'trivy-results.sarif' + + - name: Upload Trivy results to GitHub Security + uses: github/codeql-action/upload-sarif@v3 + if: always() + with: + sarif_file: 'trivy-results.sarif' + + docker-build: + name: Build Docker Image + runs-on: ubuntu-latest + needs: [lint, test, build] + if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop') + permissions: + contents: read + packages: write + steps: + - uses: actions/checkout@v4 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Log in to Container Registry + uses: docker/login-action@v3 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract metadata + id: meta + uses: docker/metadata-action@v5 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + tags: | + type=ref,event=branch + type=sha,prefix={{branch}}- + type=semver,pattern={{version}} + type=semver,pattern={{major}}.{{minor}} + + - name: Build and push Docker image + uses: docker/build-push-action@v5 + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max + + deploy-staging: + name: Deploy to Staging + runs-on: ubuntu-latest + needs: [docker-build] + if: github.ref == 'refs/heads/develop' + environment: + name: staging + url: https://staging.codeforge.example.com + steps: + - uses: actions/checkout@v4 + + - name: Deploy to staging + run: | + echo "Deploying to staging environment..." + echo "Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:develop-${{ github.sha }}" + + - name: Notify deployment + uses: 8398a7/action-slack@v3 + if: always() + with: + status: ${{ job.status }} + text: 'Staging deployment ${{ job.status }}' + webhook_url: ${{ secrets.SLACK_WEBHOOK }} + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }} + + deploy-production: + name: Deploy to Production + runs-on: ubuntu-latest + needs: [docker-build, e2e-tests] + if: github.ref == 'refs/heads/main' + environment: + name: production + url: https://codeforge.example.com + steps: + - uses: actions/checkout@v4 + + - name: Deploy to production + run: | + echo "Deploying to production environment..." + echo "Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:main-${{ github.sha }}" + + - name: Notify deployment + uses: 8398a7/action-slack@v3 + if: always() + with: + status: ${{ job.status }} + text: 'Production deployment ${{ job.status }}' + webhook_url: ${{ secrets.SLACK_WEBHOOK }} + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..4d1e054 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,87 @@ +name: Release + +on: + push: + tags: + - 'v*' + +env: + NODE_VERSION: '20.x' + REGISTRY: ghcr.io + IMAGE_NAME: ${{ github.repository }} + +jobs: + release: + name: Create Release + runs-on: ubuntu-latest + permissions: + contents: write + packages: write + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Create ZIP archive + run: | + cd dist + zip -r ../codeforge-${{ github.ref_name }}.zip . + cd .. + + - name: Generate changelog + id: changelog + run: | + echo "## Changes" > CHANGELOG.md + git log $(git describe --tags --abbrev=0 HEAD^)..HEAD --pretty=format:"- %s (%h)" >> CHANGELOG.md + + - name: Create Release + uses: softprops/action-gh-release@v1 + with: + files: codeforge-${{ github.ref_name }}.zip + body_path: CHANGELOG.md + draft: false + prerelease: false + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Log in to Container Registry + uses: docker/login-action@v3 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract version from tag + id: version + run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT + + - name: Build and push Docker image + uses: docker/build-push-action@v5 + with: + context: . + push: true + tags: | + ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.version.outputs.VERSION }} + ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest + labels: | + org.opencontainers.image.title=CodeForge + org.opencontainers.image.description=Low-Code Next.js App Builder + org.opencontainers.image.version=${{ steps.version.outputs.VERSION }} + org.opencontainers.image.source=${{ github.server_url }}/${{ github.repository }} + cache-from: type=gha + cache-to: type=gha,mode=max diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..143d48c --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,177 @@ +stages: + - lint + - test + - build + - security + - docker + - deploy + +variables: + NODE_VERSION: '20' + DOCKER_DRIVER: overlay2 + DOCKER_TLS_CERTDIR: '/certs' + NPM_CONFIG_CACHE: '$CI_PROJECT_DIR/.npm' + REGISTRY: '$CI_REGISTRY_IMAGE' + +cache: + key: + files: + - package-lock.json + paths: + - node_modules/ + - .npm/ + +.node_template: &node_template + image: node:${NODE_VERSION}-alpine + before_script: + - node --version + - npm --version + - npm ci --cache .npm --prefer-offline + +lint:eslint: + <<: *node_template + stage: lint + script: + - npm run lint || echo "No lint script found" + allow_failure: false + +lint:typecheck: + <<: *node_template + stage: lint + script: + - npx tsc --noEmit + allow_failure: false + +test:unit: + <<: *node_template + stage: test + script: + - npm test || echo "No test script found" + coverage: '/Lines\s*:\s*(\d+\.\d+)%/' + artifacts: + when: always + reports: + junit: junit.xml + coverage_report: + coverage_format: cobertura + path: coverage/cobertura-coverage.xml + paths: + - coverage/ + expire_in: 1 week + +build:app: + <<: *node_template + stage: build + script: + - npm run build + artifacts: + paths: + - dist/ + expire_in: 1 week + needs: + - lint:eslint + - lint:typecheck + - test:unit + +test:e2e: + image: mcr.microsoft.com/playwright:v1.42.0-focal + stage: test + script: + - npm ci --cache .npm --prefer-offline + - npx playwright install chromium + - npm run test:e2e || echo "No E2E tests configured" + artifacts: + when: always + paths: + - playwright-report/ + expire_in: 1 week + needs: + - build:app + allow_failure: true + +security:audit: + <<: *node_template + stage: security + script: + - npm audit --audit-level=moderate || true + allow_failure: true + +security:trivy: + stage: security + image: + name: aquasec/trivy:latest + entrypoint: [''] + script: + - trivy fs --exit-code 0 --no-progress --format json --output trivy-report.json . + - trivy fs --exit-code 1 --severity CRITICAL --no-progress . + artifacts: + reports: + container_scanning: trivy-report.json + allow_failure: true + +docker:build: + stage: docker + image: docker:24-dind + services: + - docker:24-dind + before_script: + - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY + script: + - docker build -t $REGISTRY:$CI_COMMIT_REF_SLUG -t $REGISTRY:$CI_COMMIT_SHORT_SHA . + - docker push $REGISTRY:$CI_COMMIT_REF_SLUG + - docker push $REGISTRY:$CI_COMMIT_SHORT_SHA + - | + if [ "$CI_COMMIT_REF_NAME" = "main" ]; then + docker tag $REGISTRY:$CI_COMMIT_SHORT_SHA $REGISTRY:latest + docker push $REGISTRY:latest + fi + needs: + - build:app + - test:unit + - security:audit + only: + - main + - develop + - tags + +deploy:staging: + stage: deploy + image: alpine:latest + before_script: + - apk add --no-cache curl + script: + - echo "Deploying to staging environment..." + - echo "Image: $REGISTRY:develop-$CI_COMMIT_SHORT_SHA" + - | + curl -X POST $STAGING_WEBHOOK_URL \ + -H "Content-Type: application/json" \ + -d "{\"image\":\"$REGISTRY:develop\",\"sha\":\"$CI_COMMIT_SHORT_SHA\"}" + environment: + name: staging + url: https://staging.codeforge.example.com + needs: + - docker:build + only: + - develop + +deploy:production: + stage: deploy + image: alpine:latest + before_script: + - apk add --no-cache curl + script: + - echo "Deploying to production environment..." + - echo "Image: $REGISTRY:main-$CI_COMMIT_SHORT_SHA" + - | + curl -X POST $PRODUCTION_WEBHOOK_URL \ + -H "Content-Type: application/json" \ + -d "{\"image\":\"$REGISTRY:latest\",\"sha\":\"$CI_COMMIT_SHORT_SHA\"}" + environment: + name: production + url: https://codeforge.example.com + needs: + - docker:build + - test:e2e + when: manual + only: + - main diff --git a/CI_CD_GUIDE.md b/CI_CD_GUIDE.md new file mode 100644 index 0000000..5b44046 --- /dev/null +++ b/CI_CD_GUIDE.md @@ -0,0 +1,350 @@ +# CI/CD Configuration Guide + +This project includes comprehensive CI/CD configurations for multiple platforms. Choose the one that best fits your infrastructure. + +## Table of Contents + +- [GitHub Actions](#github-actions) +- [GitLab CI](#gitlab-ci) +- [Jenkins](#jenkins) +- [CircleCI](#circleci) +- [Docker Setup](#docker-setup) + +--- + +## GitHub Actions + +### Location +- `.github/workflows/ci.yml` - Main CI/CD pipeline +- `.github/workflows/release.yml` - Release automation + +### Features +- ✅ Lint and type checking +- ✅ Unit and E2E tests +- ✅ Docker build and push to GHCR +- ✅ Security scanning with Trivy +- ✅ Automated deployments to staging/production +- ✅ Release creation with ZIP artifacts + +### Setup + +1. **Enable GitHub Actions** in your repository settings + +2. **Configure secrets** (Settings → Secrets and variables → Actions): + ``` + CODECOV_TOKEN # Optional: for code coverage reporting + SLACK_WEBHOOK # Optional: for Slack notifications + STAGING_WEBHOOK_URL # Webhook for staging deployment + PRODUCTION_WEBHOOK_URL # Webhook for production deployment + ``` + +3. **Enable GitHub Packages** for Docker image storage (automatically enabled) + +4. **Branch Protection** (recommended): + - Require status checks to pass before merging + - Require pull request reviews + +### Usage + +- Push to `develop` → Runs tests and deploys to staging +- Push to `main` → Runs full pipeline and deploys to production +- Create tag `v*` → Triggers release workflow + +--- + +## GitLab CI + +### Location +- `.gitlab-ci.yml` + +### Features +- ✅ Multi-stage pipeline with dependency caching +- ✅ Parallel test execution +- ✅ Docker build and push to GitLab Registry +- ✅ Security scanning and audit reports +- ✅ Manual approval for production deployments + +### Setup + +1. **Configure CI/CD variables** (Settings → CI/CD → Variables): + ``` + STAGING_WEBHOOK_URL # Webhook for staging deployment + PRODUCTION_WEBHOOK_URL # Webhook for production deployment + ``` + +2. **Enable GitLab Container Registry** (enabled by default) + +3. **Configure runners** with Docker executor: + ```toml + [[runners]] + name = "docker-runner" + executor = "docker" + [runners.docker] + image = "node:20-alpine" + privileged = true + ``` + +### Usage + +- Pipeline runs automatically on push +- Jobs are cached for faster execution +- Production deployment requires manual approval + +--- + +## Jenkins + +### Location +- `Jenkinsfile` + +### Features +- ✅ Declarative pipeline with parallel stages +- ✅ Integration with Slack for notifications +- ✅ Artifact archiving and HTML report publishing +- ✅ Manual approval for production deployments +- ✅ Automatic workspace cleanup + +### Setup + +1. **Install required plugins**: + - Pipeline + - NodeJS + - Docker Pipeline + - Slack Notification + - HTML Publisher + +2. **Configure Node.js** (Manage Jenkins → Tools): + - Add Node.js installation named "Node 20" + - Version: 20.x + +3. **Configure credentials**: + ``` + docker-registry-credentials # Username/password for GHCR + ``` + +4. **Set environment variables** in Jenkins configuration: + ``` + GIT_REPO_OWNER + GIT_REPO_NAME + STAGING_WEBHOOK_URL + PRODUCTION_WEBHOOK_URL + SLACK_CHANNEL + ``` + +5. **Create multibranch pipeline**: + - New Item → Multibranch Pipeline + - Add source: Git/GitHub + - Script Path: Jenkinsfile + +### Usage + +- Pipeline triggers on SCM changes (polling or webhooks) +- View results in Blue Ocean interface +- Approve production deployments manually + +--- + +## CircleCI + +### Location +- `.circleci/config.yml` + +### Features +- ✅ Workflow orchestration with job dependencies +- ✅ Docker layer caching for faster builds +- ✅ Slack notifications via orb +- ✅ Test result and artifact storage +- ✅ Approval step for production deployments + +### Setup + +1. **Connect repository** to CircleCI + +2. **Configure environment variables** (Project Settings → Environment Variables): + ``` + DOCKER_USERNAME # GitHub username + DOCKER_PASSWORD # GitHub personal access token + STAGING_WEBHOOK_URL # Webhook for staging deployment + PRODUCTION_WEBHOOK_URL # Webhook for production deployment + SLACK_ACCESS_TOKEN # Optional: for Slack notifications + SLACK_DEFAULT_CHANNEL # Optional: default Slack channel + ``` + +3. **Enable Docker Layer Caching** (requires paid plan): + - Project Settings → Advanced → Enable Docker Layer Caching + +### Usage + +- Pipeline runs on every push +- Manual approval required for production on `main` branch +- View detailed insights in CircleCI dashboard + +--- + +## Docker Setup + +### Files +- `Dockerfile` - Multi-stage build for production +- `docker-compose.yml` - Local development and deployment +- `nginx.conf` - Nginx configuration for serving app +- `.dockerignore` - Excludes unnecessary files + +### Build and Run Locally + +```bash +# Build image +docker build -t codeforge:local . + +# Run container +docker run -p 3000:80 codeforge:local + +# Or use docker-compose +docker-compose up -d +``` + +### Production Deployment + +The Docker image is automatically built and pushed to GHCR: + +```bash +# Pull latest image +docker pull ghcr.io//:latest + +# Run in production +docker run -d \ + -p 80:80 \ + --name codeforge \ + --restart unless-stopped \ + ghcr.io//:latest +``` + +### Health Checks + +The container includes a health check endpoint at `/health`: + +```bash +curl http://localhost:3000/health +# Response: healthy +``` + +--- + +## Common Configuration + +### Environment Variables + +All CI/CD platforms use these common environment variables: + +| Variable | Description | Required | +|----------|-------------|----------| +| `NODE_VERSION` | Node.js version | Yes (default: 20) | +| `REGISTRY` | Docker registry URL | Yes (default: ghcr.io) | +| `IMAGE_NAME` | Docker image name | Yes | +| `STAGING_WEBHOOK_URL` | Staging deployment webhook | Optional | +| `PRODUCTION_WEBHOOK_URL` | Production deployment webhook | Optional | +| `CODECOV_TOKEN` | Codecov integration token | Optional | +| `SLACK_WEBHOOK` | Slack webhook URL | Optional | + +### Branch Strategy + +- `main` - Production branch, deploys to production +- `develop` - Development branch, deploys to staging +- `feature/*` - Feature branches, runs tests only +- `v*` tags - Triggers release creation + +### Pipeline Stages + +All pipelines follow a similar structure: + +1. **Lint** - ESLint and TypeScript checks +2. **Test** - Unit tests with coverage +3. **Build** - Application build +4. **E2E** - Playwright end-to-end tests +5. **Security** - npm audit and Trivy scan +6. **Docker** - Build and push image +7. **Deploy** - Staging (auto) and Production (manual) + +### Deployment Webhooks + +Configure deployment webhooks to integrate with your hosting platform: + +```bash +# Example webhook payload +{ + "image": "ghcr.io//:latest", + "sha": "abc123", + "environment": "production" +} +``` + +Supported platforms: +- Vercel +- Netlify +- AWS ECS/EKS +- Kubernetes +- Custom deployment scripts + +--- + +## Troubleshooting + +### GitHub Actions + +**Issue**: Docker push fails +```bash +Solution: Check GITHUB_TOKEN permissions in repository settings +Settings → Actions → General → Workflow permissions → Read and write +``` + +### GitLab CI + +**Issue**: Runner fails to pull image +```bash +Solution: Check runner has access to Docker +docker info # Should work on runner +``` + +### Jenkins + +**Issue**: Pipeline hangs on input step +```bash +Solution: Check Jenkins has sufficient executors +Manage Jenkins → Configure System → # of executors +``` + +### CircleCI + +**Issue**: Build fails with out of memory +```bash +Solution: Increase resource class in config.yml +resource_class: large # or xlarge +``` + +--- + +## Additional Resources + +- [GitHub Actions Documentation](https://docs.github.com/en/actions) +- [GitLab CI/CD Documentation](https://docs.gitlab.com/ee/ci/) +- [Jenkins Pipeline Documentation](https://www.jenkins.io/doc/book/pipeline/) +- [CircleCI Documentation](https://circleci.com/docs/) +- [Docker Documentation](https://docs.docker.com/) + +--- + +## Security Best Practices + +1. **Never commit secrets** to the repository +2. **Use environment variables** for sensitive data +3. **Enable branch protection** on main/develop branches +4. **Require code reviews** before merging +5. **Run security scans** in every pipeline +6. **Keep dependencies updated** using Dependabot/Renovate +7. **Use signed commits** for production deployments +8. **Implement RBAC** for deployment approvals + +--- + +## License + +This CI/CD configuration is part of CodeForge and follows the same license as the main project. diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..1111ce8 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,24 @@ +FROM node:20-alpine AS builder + +WORKDIR /app + +COPY package*.json ./ + +RUN npm ci --only=production + +COPY . . + +RUN npm run build + +FROM nginx:alpine AS runtime + +COPY --from=builder /app/dist /usr/share/nginx/html + +COPY nginx.conf /etc/nginx/conf.d/default.conf + +EXPOSE 80 + +HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ + CMD wget --quiet --tries=1 --spider http://localhost/health || exit 1 + +CMD ["nginx", "-g", "daemon off;"] diff --git a/Jenkinsfile b/Jenkinsfile new file mode 100644 index 0000000..16790ae --- /dev/null +++ b/Jenkinsfile @@ -0,0 +1,291 @@ +pipeline { + agent any + + environment { + NODE_VERSION = '20' + REGISTRY = 'ghcr.io' + IMAGE_NAME = "${env.REGISTRY}/${env.GIT_REPO_OWNER}/${env.GIT_REPO_NAME}" + DOCKER_CREDENTIALS = credentials('docker-registry-credentials') + SLACK_CHANNEL = '#deployments' + } + + options { + buildDiscarder(logRotator(numToKeepStr: '10')) + disableConcurrentBuilds() + timeout(time: 1, unit: 'HOURS') + timestamps() + } + + triggers { + pollSCM('H/5 * * * *') + githubPush() + } + + stages { + stage('Checkout') { + steps { + checkout scm + script { + env.GIT_COMMIT_SHORT = sh( + script: "git rev-parse --short HEAD", + returnStdout: true + ).trim() + } + } + } + + stage('Setup') { + steps { + script { + nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") { + sh ''' + node --version + npm --version + npm ci + ''' + } + } + } + } + + stage('Lint') { + parallel { + stage('ESLint') { + steps { + script { + nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") { + sh 'npm run lint || echo "No lint script found"' + } + } + } + } + stage('TypeScript Check') { + steps { + script { + nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") { + sh 'npx tsc --noEmit' + } + } + } + } + } + } + + stage('Test') { + steps { + script { + nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") { + sh 'npm test || echo "No test script found"' + } + } + } + post { + always { + junit testResults: '**/junit.xml', allowEmptyResults: true + publishHTML([ + allowMissing: true, + alwaysLinkToLastBuild: true, + keepAll: true, + reportDir: 'coverage', + reportFiles: 'index.html', + reportName: 'Coverage Report' + ]) + } + } + } + + stage('Build') { + steps { + script { + nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") { + sh 'npm run build' + } + } + } + post { + success { + archiveArtifacts artifacts: 'dist/**/*', fingerprint: true + } + } + } + + stage('E2E Tests') { + when { + anyOf { + branch 'main' + branch 'develop' + } + } + steps { + script { + nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") { + sh ''' + npx playwright install --with-deps chromium + npm run test:e2e || echo "No E2E tests configured" + ''' + } + } + } + post { + always { + publishHTML([ + allowMissing: true, + alwaysLinkToLastBuild: true, + keepAll: true, + reportDir: 'playwright-report', + reportFiles: 'index.html', + reportName: 'Playwright Report' + ]) + } + } + } + + stage('Security Scan') { + parallel { + stage('NPM Audit') { + steps { + script { + nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") { + sh 'npm audit --audit-level=moderate || true' + } + } + } + } + stage('Trivy Scan') { + steps { + sh ''' + docker run --rm -v $(pwd):/workspace aquasec/trivy:latest \ + fs --exit-code 0 --no-progress --format json \ + --output /workspace/trivy-report.json /workspace + ''' + } + post { + always { + archiveArtifacts artifacts: 'trivy-report.json', allowEmptyArchive: true + } + } + } + } + } + + stage('Docker Build') { + when { + anyOf { + branch 'main' + branch 'develop' + } + } + steps { + script { + def imageTags = [ + "${IMAGE_NAME}:${env.BRANCH_NAME}", + "${IMAGE_NAME}:${env.BRANCH_NAME}-${env.GIT_COMMIT_SHORT}" + ] + + if (env.BRANCH_NAME == 'main') { + imageTags.add("${IMAGE_NAME}:latest") + } + + docker.withRegistry("https://${REGISTRY}", 'docker-registry-credentials') { + def customImage = docker.build("${IMAGE_NAME}:${env.BUILD_ID}") + imageTags.each { tag -> + customImage.push(tag.split(':')[1]) + } + } + } + } + } + + stage('Deploy to Staging') { + when { + branch 'develop' + } + environment { + DEPLOY_ENV = 'staging' + } + steps { + script { + echo "Deploying to staging environment..." + echo "Image: ${IMAGE_NAME}:develop-${env.GIT_COMMIT_SHORT}" + + sh ''' + curl -X POST ${STAGING_WEBHOOK_URL} \ + -H "Content-Type: application/json" \ + -d "{\\"image\\":\\"${IMAGE_NAME}:develop\\",\\"sha\\":\\"${GIT_COMMIT_SHORT}\\"}" + ''' + } + } + post { + success { + slackSend( + channel: SLACK_CHANNEL, + color: 'good', + message: "Staging deployment successful: ${env.JOB_NAME} #${env.BUILD_NUMBER}" + ) + } + failure { + slackSend( + channel: SLACK_CHANNEL, + color: 'danger', + message: "Staging deployment failed: ${env.JOB_NAME} #${env.BUILD_NUMBER}" + ) + } + } + } + + stage('Deploy to Production') { + when { + branch 'main' + } + environment { + DEPLOY_ENV = 'production' + } + steps { + input message: 'Deploy to production?', ok: 'Deploy' + script { + echo "Deploying to production environment..." + echo "Image: ${IMAGE_NAME}:latest" + + sh ''' + curl -X POST ${PRODUCTION_WEBHOOK_URL} \ + -H "Content-Type: application/json" \ + -d "{\\"image\\":\\"${IMAGE_NAME}:latest\\",\\"sha\\":\\"${GIT_COMMIT_SHORT}\\"}" + ''' + } + } + post { + success { + slackSend( + channel: SLACK_CHANNEL, + color: 'good', + message: "Production deployment successful: ${env.JOB_NAME} #${env.BUILD_NUMBER}" + ) + } + failure { + slackSend( + channel: SLACK_CHANNEL, + color: 'danger', + message: "Production deployment failed: ${env.JOB_NAME} #${env.BUILD_NUMBER}" + ) + } + } + } + } + + post { + always { + cleanWs() + } + success { + echo 'Pipeline completed successfully!' + } + failure { + echo 'Pipeline failed!' + slackSend( + channel: SLACK_CHANNEL, + color: 'danger', + message: "Build failed: ${env.JOB_NAME} #${env.BUILD_NUMBER}" + ) + } + } +} diff --git a/README.md b/README.md index a362226..c28c48b 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,7 @@ The application includes comprehensive built-in documentation: - **Roadmap** - Completed features and planned enhancements - **Agents Files** - AI service architecture and integration points - **Sass Styles Guide** - Custom Material UI components, utilities, mixins, and animations +- **CI/CD Guide** - Complete setup guide for all CI/CD platforms Access documentation by clicking the **Documentation** tab in the application. @@ -105,16 +106,23 @@ Access documentation by clicking the **Documentation** tab in the application. - ZIP file export with README generation - Keyboard shortcuts for power users +### ✅ Recently Added (v4.2) +- Complete CI/CD configurations (GitHub Actions, GitLab CI, Jenkins, CircleCI) +- Docker containerization with multi-stage builds +- Nginx configuration for production deployment +- Automated release workflow with versioning +- Security scanning integration (Trivy, npm audit) +- Slack notification integration +- Health check endpoints + ### 🔮 Planned - Real-time preview with hot reload - Database seeding designer - API client generator - Visual form builder - Authentication designer (JWT, OAuth, sessions) -- Docker configuration generator - GraphQL API designer - State management designer (Redux, Zustand, Jotai) -- CI/CD pipeline generator - Component library export - Design system generator - Collaboration features @@ -138,6 +146,7 @@ The Spark Template files and resources from GitHub are licensed under the terms - [Full Documentation](./PRD.md) - Complete product requirements and design decisions - [Error Repair Guide](./ERROR_REPAIR_GUIDE.md) - Error detection and repair system documentation +- [CI/CD Guide](./CI_CD_GUIDE.md) - Complete CI/CD setup and configuration guide --- diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..34a2065 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,26 @@ +version: '3.8' + +services: + app: + build: + context: . + dockerfile: Dockerfile + ports: + - '3000:80' + environment: + - NODE_ENV=production + restart: unless-stopped + healthcheck: + test: ['CMD', 'wget', '--quiet', '--tries=1', '--spider', 'http://localhost/health'] + interval: 30s + timeout: 3s + retries: 3 + start_period: 5s + labels: + - 'traefik.enable=true' + - 'traefik.http.routers.codeforge.rule=Host(`codeforge.example.com`)' + - 'traefik.http.services.codeforge.loadbalancer.server.port=80' + +networks: + default: + name: codeforge-network diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..8efb895 --- /dev/null +++ b/nginx.conf @@ -0,0 +1,28 @@ +server { + listen 80; + server_name _; + root /usr/share/nginx/html; + index index.html; + + location / { + try_files $uri $uri/ /index.html; + } + + location /health { + access_log off; + return 200 "healthy\n"; + add_header Content-Type text/plain; + } + + location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { + expires 1y; + add_header Cache-Control "public, immutable"; + } + + gzip on; + gzip_vary on; + gzip_min_length 1024; + gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript; + + error_page 404 /index.html; +} diff --git a/src/components/DocumentationView.tsx b/src/components/DocumentationView.tsx index 81adcc8..2c013af 100644 --- a/src/components/DocumentationView.tsx +++ b/src/components/DocumentationView.tsx @@ -25,7 +25,8 @@ import { Rocket, Target, Lightbulb, - MagnifyingGlass + MagnifyingGlass, + GitBranch } from '@phosphor-icons/react' export function DocumentationView() { @@ -54,6 +55,10 @@ export function DocumentationView() { Sass Styles Guide + + + CI/CD Guide +
@@ -433,6 +438,18 @@ export function DocumentationView() { description="Next.js configuration, npm package management, and build script customization" version="v4.0" /> + +
@@ -1127,6 +1144,450 @@ function MyComponent() { + + +
+
+
+ +
+
+

CI/CD Guide

+

+ Complete deployment automation for multiple platforms +

+
+
+ + + +
+

Overview

+

+ CodeForge includes production-ready CI/CD configurations for GitHub Actions, GitLab CI, Jenkins, + and CircleCI. Each pipeline includes linting, testing, security scanning, Docker image building, + and automated deployment workflows. +

+
+ + + + Available Configurations + + + + + + + + + +
+

Pipeline Stages

+

+ All CI/CD configurations follow a similar multi-stage pipeline structure: +

+
+ + + + + + + +
+
+ + + + Docker Configuration + Containerization for production deployment + + +
+

Files Included

+
+
+ Dockerfile +

Multi-stage build with Node.js builder and Nginx runtime

+
+
+ nginx.conf +

Production Nginx configuration with health checks and caching

+
+
+ docker-compose.yml +

Local development and deployment orchestration

+
+
+ .dockerignore +

Optimized build context by excluding unnecessary files

+
+
+
+ + + +
+

Docker Commands

+ 
+{`# Build image locally
+docker build -t codeforge:local .
+
+# Run container
+docker run -p 3000:80 codeforge:local
+
+# Use docker-compose
+docker-compose up -d
+
+# Pull from registry
+docker pull ghcr.io//:latest`}
+
+
+ + + +
+

Features

+
    +
  • + + Multi-stage build reduces final image size to ~50MB +
    • +
  • + + Nginx serves static files with gzip compression +
    • +
  • + + Health check endpoint at /health for orchestration +
    • +
  • + + Automatic cache headers for static assets +
    • +
  • + + SPA routing support with fallback to index.html +
    • +
+
+ + + + + + Environment Variables + Required configuration for CI/CD platforms + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableDescriptionRequired
NODE_VERSIONNode.js version (default: 20)No
REGISTRYDocker registry URL (default: ghcr.io)No
STAGING_WEBHOOK_URLWebhook for staging deploymentsOptional
PRODUCTION_WEBHOOK_URLWebhook for production deploymentsOptional
CODECOV_TOKENCodecov integration tokenOptional
SLACK_WEBHOOKSlack webhook for notificationsOptional
+
+
+ + + +
+

Branch Strategy

+
+ + +
+ +
+

main

+

+ Production branch - deploys to production environment (manual approval required) +

+
+
+ + + + +
+ +
+

develop

+

+ Development branch - automatically deploys to staging environment +

+
+
+ + + + +
+ +
+

feature/*

+

+ Feature branches - runs tests only, no deployment +

+
+
+ + + + +
+ +
+

v* tags

+

+ Version tags - triggers release workflow with artifacts and changelog +

+
+
+ + +
+
+ + + + + + Quick Start + + + +
+
+

+ 1 + Choose Your Platform +

+

+ Select GitHub Actions, GitLab CI, Jenkins, or CircleCI based on your infrastructure +

+
+
+

+ 2 + Configure Secrets +

+

+ Add required environment variables and secrets in your platform's settings +

+
+
+

+ 3 + Push to Repository +

+

+ Push code to main or develop branch to trigger the CI/CD pipeline +

+
+
+

+ 4 + Monitor Pipeline +

+

+ View pipeline status, test results, and deployment logs in your platform's dashboard +

+
+
+ + + + + + + + Best Practices + + + +
    +
  • + + Never commit secrets - use environment variables and platform secret management +
    • +
  • + + Enable branch protection on main and develop branches +
    • +
  • + + Require code reviews and passing tests before merging +
    • +
  • + + Use manual approval gates for production deployments +
    • +
  • + + Monitor security scan results and fix vulnerabilities promptly +
    • +
  • + + Keep dependencies updated with Dependabot or Renovate +
    • +
  • + + Use semantic versioning for releases (v1.0.0, v1.1.0, etc.) +
    • +
  • + + Configure Slack or email notifications for deployment status +
    • +
+ + + + + + + + Additional Resources + + + +
    +
  • + + CI_CD_GUIDE.md - Detailed setup guide for all platforms +
    • +
  • + + .github/workflows/ - GitHub Actions workflows +
    • +
  • + + .gitlab-ci.yml - GitLab CI configuration +
    • +
  • + + Jenkinsfile - Jenkins pipeline definition +
    • +
  • + + .circleci/config.yml - CircleCI configuration +
    • +
+ + +
+ @@ -1134,6 +1595,59 @@ function MyComponent() { ) } +function CICDPlatformItem({ name, file, description, features }: { + name: string + file: string + description: string + features: string[] +}) { + return ( +
+
+
+ +

{name}

+
+ {file} +

{description}

+
+
+

Key Features:

+
    + {features.map((feature, idx) => ( +
  • + + {feature} +
    • + ))} +
+
+
+ ) +} + +function PipelineStageCard({ stage, description, duration }: { + stage: string + description: string + duration: string +}) { + return ( + + +
+
+

{stage}

+

{description}

+
+ + {duration} + +
+ + + ) +} + function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) { return (