A smooth development pipeline is essential for productive development. In this post, I’ll walk you through the complete development workflow for vikan.cloud, from writing code in Cursor IDE to automated deployment on Cloudflare Workers.

Pipeline Overview

The development pipeline consists of three main stages:

1. Development: Local development with Cursor IDE
2. Version Control: Git and GitHub for collaboration
3. Deployment: Automated CI/CD to Cloudflare Workers

Let’s dive into each stage.

Stage 1: Development with Cursor IDE

Why Cursor?

Cursor is an AI-powered IDE that significantly accelerates development:

• AI Code Completion: Intelligent suggestions based on your codebase
• Chat with Codebase: Ask questions about your code and get instant answers
• Refactoring Assistance: AI helps improve code structure and patterns
• Error Detection: Catch issues before they become problems
• Context Awareness: Understands your entire project, not just the current file

Local Development Setup

1. Clone the Repository

git clone https://github.com/stianvi/vikan-cloud.git
cd vikan-cloud

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

The site is now available at http://localhost:4321 with hot module reloading.

Development Workflow

Writing Blog Posts

1. Create a new markdown file in src/content/articles/
2. Use Cursor’s AI to help draft content
3. Preview locally with npm run dev
4. Check formatting and styling

Creating Components

1. Create new .astro files in src/components/
2. Use Cursor’s AI to generate component code
3. Test in the development server
4. Refactor with AI assistance

API Development

1. Create API routes in src/pages/api/
2. Use TypeScript for type safety
3. Test with local development server
4. Use Cursor to help with error handling

Cursor Features I Use Daily

1. AI Chat

Ask Cursor questions about your codebase:

"Where is the visitor tracking API implemented?"
"How does the theme toggle work?"
"Show me all security headers in the middleware"

2. Code Generation

Generate code from descriptions:

"Create a new API endpoint that returns visitor statistics"
"Add a new blog post component with dark mode support"
"Generate a TypeScript function to anonymize IP addresses"

3. Refactoring

Improve code with AI assistance:

"Refactor this function to use async/await"
"Extract this logic into a reusable utility function"
"Add error handling to this API route"

4. Debugging

Get help fixing errors:

"This build is failing, what's wrong?"
"Why is this TypeScript error occurring?"
"Help me fix this ESLint security warning"

Stage 2: Version Control with Git & GitHub

Branch Strategy

The project uses a feature branch workflow:

1. main: Production-ready code
2. develop: Development branch (optional)
3. feature/*: Feature branches for new functionality

Workflow

1. Create Feature Branch

git checkout -b feature/my-new-feature

2. Make Changes

• Write code with Cursor
• Test locally with npm run dev
• Run type checking: npm run type-check
• Run security checks: npm run security:check

3. Commit Changes

git add .
git commit -m "feat: add new feature description"

4. Push to GitHub

git push -u origin feature/my-new-feature

5. Create Pull Request

• Go to GitHub and create a PR
• Review changes
• Wait for CI/CD to pass
• Merge to main

Commit Message Convention

Following conventional commits:

• feat: New feature
• fix: Bug fix
• docs: Documentation changes
• style: Code style changes
• refactor: Code refactoring
• test: Test additions/changes
• chore: Maintenance tasks

GitHub Features

Issues

Track features and bugs:

• Create issues for new features
• Link PRs to issues
• Close issues automatically when PRs merge

Pull Requests

Code review and collaboration:

• Review code changes
• Discuss implementation
• Request changes if needed
• Merge when approved

GitHub Actions

Automated CI/CD (covered in Stage 3)

Stage 3: CI/CD Pipeline

GitHub Actions Workflow

The CI/CD pipeline runs automatically on every push and pull request.

Workflow File: .github/workflows/ci.yml

name: CI

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  test:
    name: Test and Build
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run npm audit
        run: npm audit --audit-level=moderate

      - name: Generate Astro types
        run: npm run astro -- sync

      - name: Type check
        run: npm run type-check

      - name: Run ESLint security checks
        run: npm run lint
        continue-on-error: true

      - name: Build
        run: npm run build

      - name: Generate SBOM
        run: npm run sbom

      - name: Run Semgrep security scan
        uses: returntocorp/semgrep-action@v1
        with:
          config: >-
            p/security-audit
            p/typescript
            p/javascript
            p/owasp-top-ten

      - name: Run Trivy vulnerability scanner
        uses: aquasecurity/trivy-action@master
        with:
          scan-type: 'fs'
          scan-ref: '.'
          format: 'sarif'
          output: 'trivy-results.sarif'
          severity: 'CRITICAL,HIGH'

      - name: Upload Trivy results to GitHub Security
        uses: github/codeql-action/upload-sarif@v2
        if: always()
        with:
          sarif_file: 'trivy-results.sarif'

Pipeline Steps Explained

1. Dependency Installation

- name: Install dependencies
  run: npm ci

Uses npm ci for clean, reproducible installs (faster and more reliable than npm install).

2. Security Scanning

Multiple security tools run in parallel:

• npm audit: Scans dependencies for known vulnerabilities
• ESLint Security Plugin: Code-level security linting
• Semgrep: Pattern-based security scanning
• Trivy: Comprehensive vulnerability scanning

3. Type Checking

- name: Type check
  run: npm run type-check

Ensures TypeScript code compiles without errors.

4. Build

- name: Build
  run: npm run build

Creates production build to verify it succeeds.

5. SBOM Generation

- name: Generate SBOM
  run: npm run sbom

Generates Software Bill of Materials for dependency tracking.

6. Security Results Upload

- name: Upload Trivy results to GitHub Security
  uses: github/codeql-action/upload-sarif@v2

Uploads security scan results to GitHub Security tab.

Deployment

Currently, deployment is manual:

npm run deploy

This uses Wrangler CLI to deploy to Cloudflare Workers.

Future: Automated Deployment

To add automated deployment on merge to main:

- name: Deploy to Cloudflare Workers
  if: github.ref == 'refs/heads/main'
  uses: cloudflare/wrangler-action@v3
  with:
    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

Complete Development Cycle

Example: Adding a New Feature

1. Create Issue (optional)

   • Document the feature
   • Add labels and description

2. Create Feature Branch

   git checkout -b feature/new-api-endpoint

3. Develop with Cursor

   • Use AI to generate code
   • Test locally
   • Iterate with AI assistance

4. Test Locally

   npm run dev          # Test in browser
   npm run type-check   # Verify types
   npm run lint         # Check security
   npm run build        # Verify build

5. Commit and Push

   git add .
   git commit -m "feat: add new API endpoint"
   git push -u origin feature/new-api-endpoint

6. Create Pull Request

   • GitHub automatically runs CI/CD
   • Review code changes
   • Wait for all checks to pass

7. Merge

   • Merge PR to main
   • Issue auto-closes (if linked)

8. Deploy (manual for now)

   npm run deploy

Best Practices & Troubleshooting

Best Practices

Development: Test locally first, use TypeScript for type safety, run security checks before committing, write descriptive commits.

Version Control: Small focused commits, descriptive branch names (feature/, fix/, docs/), link PRs to issues, review your own code before requesting review.

CI/CD: Don’t skip checks, fix warnings, monitor build times, use caching for faster builds.

Troubleshooting

Build Fails in CI: Check Node.js version matches locally, clear node_modules and reinstall, verify all dependencies are in package.json.

Security Scan Fails: Review security warnings, update vulnerable dependencies, fix code-level security issues, use npm audit fix for automatic fixes (when safe).

Type Errors: Run npm run type-check locally, check TypeScript version matches, verify tsconfig.json is correct.

Deployment Issues: Verify Cloudflare API token is valid, check wrangler.json configuration, ensure build completes successfully.

Benefits & Conclusion

Benefits

Developer Experience: Fast feedback (CI/CD runs in minutes), AI assistance accelerates development, type safety catches errors early, automated security scanning.

Code Quality: Consistent process every time, multiple checks before merge, security scans on every change, clear commit messages and PRs.

Collaboration: Transparent changes in PRs, code review before merge, issues linked to PRs, automated CI/CD testing.

Conclusion

The development pipeline for vikan.cloud combines:

• Cursor IDE: AI-powered development acceleration
• Git & GitHub: Version control and collaboration
• GitHub Actions: Automated CI/CD with security scanning
• Cloudflare Workers: Global edge deployment

This pipeline provides:

• ✅ Fast development with AI assistance
• ✅ Automated testing and security scanning
• ✅ Consistent deployment process
• ✅ High code quality and security

The result is a smooth, efficient development workflow that catches issues early and deploys with confidence.