SvelteKit Image Transformer - Cloudflare Workflow

A production-ready monorepo demonstrating how to build a full-stack application with a SvelteKit frontend and a Cloudflare Worker backend for image transformation workflows, complete with seamless local development support.

📋 Overview

This monorepo showcases best practices for integrating Cloudflare Workers with SvelteKit applications. It provides a unified local development experience where both the frontend and backend run together, allowing you to develop and test your image transformation pipeline as if it were deployed to Cloudflare's edge network.

What are Cloudflare Workers?

Cloudflare Workers are lightweight, fast serverless functions that run on Cloudflare's edge network. They enable you to build scalable applications without managing infrastructure, making them ideal for image processing, API gateways, and real-time transformations.

📁 Project Structure

This monorepo consists of two main applications:

Backend: image-transformer

A Cloudflare Worker that handles image transformation logic. This service:

• Processes image uploads and transformations at the edge
• Provides API endpoints (/upload, /status, /view) for the frontend
• Integrates with Cloudflare R2 for object storage
• Handles all business logic and file operations
• Uses Wrangler for local development and deployment

Frontend: sk-image-transformer

A modern SvelteKit application serving as the user interface:

• Communicates with the Worker backend via HTTP/fetch
• Provides file upload interface for image transformation
• Uses Vite dev server with proxy to route requests to local Worker
• Configured to work seamlessly with the local Worker instance
• Supports Tailwind CSS for styling and ESLint for code quality

🚀 Quick Start

Prerequisites

• Node.js 18.0 or higher
• pnpm (or npm/yarn)
• Wrangler CLI (installed as a dependency)

Installation

1. Install dependencies across the monorepo:

   pnpm i
   

2. Start the development environment:

   pnpm start
   

This single command:

• Starts the Cloudflare Worker locally on port 8787 using Wrangler
• Automatically launches the SvelteKit development server on port 5173
• Enables both apps to communicate seamlessly with proxy routing
• Sets up hot module reloading for rapid development

Testing Locally

Once running, open your browser and navigate to:

http://localhost:5173/

You should see the SvelteKit application ready to upload and transform images using the local Worker backend.

🔗 How It Works

The key to seamless local development is the Vite proxy and Wrangler integration:

1. Vite Configuration (sk-image-transformer/vite.config.ts):

   • Configures proxy routes for /upload, /status, and /view endpoints
   • Routes all requests to the local Worker at http://127.0.0.1:8787
   • Enables CORS bypass during development
   • Allows file system access for file uploads from any drive (Windows)

2. Development Script (dev.mjs):

   • Orchestrates starting the Cloudflare Worker
   • Automatically starts the SvelteKit dev server after the Worker is ready
   • Manages the shared environment for both applications
   • Persists Worker state locally for testing

3. Communication:

   • Frontend makes fetch requests to /upload, /status, /view endpoints
   • Vite proxy intercepts these requests and routes them to the Worker
   • Backend handles image transformation and returns results
   • All requests stay local during development, then route through Cloudflare when deployed

🎨 Image Transformation API

Upload Image

POST /upload
- Accept: multipart/form-data
- Body: FormData with 'file' field
- Returns: JSON with transformation details

Get Transformation Status

GET /status?id={transformation_id}
- Returns: JSON with current transformation status

View Transformed Image

GET /view/{image_id}
- Returns: Transformed image file or metadata

📦 Deploying to Cloudflare

Ready to go live? Follow these steps:

Step 1: Prepare Cloudflare Configuration

Update the wrangler.jsonc files in both image-transformer and sk-image-transformer directories with your Cloudflare account details:

{
  "name": "image-transformer",
  "main": "src/index.ts",
  "compatibility_date": "2024-01-01",
  "env": {
    "production": {
      "routes": [
        { "pattern": "example.com/worker/*", "zone_name": "example.com" }
      ]
    }
  }
}

Step 2: Create R2 Bucket (Optional)

If using Cloudflare R2 for storage:

pnpm dlx wrangler r2 bucket create image-transformer-bucket

Step 3: Deploy Both Applications

Deploy the backend worker first:

cd image-transformer
pnpm run deploy

Then deploy the SvelteKit application:

cd ../sk-image-transformer
pnpm run deploy

🛠️ Available Commands

Root Level

pnpm start              # Start both Worker and SvelteKit dev servers
pnpm format             # Format code across all workspaces

image-transformer (Worker)

pnpm dev                # Start Wrangler dev server
pnpm deploy             # Deploy to Cloudflare
pnpm test               # Run tests with Vitest
pnpm cf-typegen         # Generate TypeScript types for worker

sk-image-transformer (SvelteKit)

pnpm dev                # Start Vite dev server
pnpm build              # Build for production
pnpm preview            # Preview production build locally
pnpm deploy             # Deploy to Cloudflare Pages
pnpm lint               # Run linting with ESLint and Prettier
pnpm format             # Format code with Prettier
pnpm check              # Type-check with svelte-check

📚 Additional Resources

• Cloudflare Workers Documentation
• Wrangler CLI Documentation
• SvelteKit Documentation
• Vite Documentation
• Cloudflare R2 Documentation
• Tailwind CSS Documentation

💡 Key Features

✅ Unified Local Development - Frontend and backend run together locally with proxy routing
✅ Image Transformation - Process images at the edge with Cloudflare Workers
✅ CORS Support - Vite proxy handles CORS bypassing during development
✅ Multi-Drive Support - Upload files from any drive on Windows (not just C:)
✅ Production Ready - Same setup works during development and after deployment
✅ Type Safe - Full TypeScript support in both frontend and backend
✅ Hot Reloading - Automatic refresh during development
✅ Testing - Vitest integration for Worker testing

🤝 Contributing

Feel free to fork this repository and use it as a starting point for your own Cloudflare + SvelteKit image processing projects!

📄 License

This project is open source and available under the MIT License.