CloudFlare-Deno Boilerplate

Modern React+Deno boilerplate with automated CI/CD, edge deployment to Cloudflare Pages & Deno Deploy, shadcn/ui components, and seamless serverless integration.

Comment

Inspiration

The modern web development landscape is fragmented with complex deployment pipelines, vendor lock-in, and inconsistent developer experiences. We were inspired to create a unified solution that combines the best of edge computing with modern React development - leveraging Cloudflare's global CDN and Deno's secure runtime to deliver lightning-fast applications with minimal configuration.

The inspiration came from seeing developers struggle with:

  • Complex multi-service deployments
  • Inconsistent local vs production environments
  • Vendor-specific serverless function formats
  • Time-consuming CI/CD setup for full-stack applications

What it does

CloudFlare-Deno Boilerplate is a production-ready full-stack application template that seamlessly integrates:

Frontend Features:

  • Modern React 19 application with TypeScript
  • Beautiful shadcn/ui components built on Radix UI
  • Dark/light theme system with system preference detection
  • Responsive design with Tailwind CSS
  • Vite for lightning-fast development and builds

Backend Features:

  • Deno serverless functions with automatic routing
  • CORS-enabled API endpoints
  • Local development server with hot reload
  • Function registry system for easy scaling

Deployment & DevOps:

  • Automated GitHub Actions CI/CD pipeline
  • Cloudflare Pages for global frontend distribution
  • Deno Deploy for edge serverless functions
  • Automatic environment variable synchronization
  • One-click template repository creation

Developer Experience:

  • Concurrent local development (React + Deno servers)
  • TypeScript everywhere for type safety
  • Modern tooling (pnpm, ESLint, Vite)
  • Comprehensive documentation and examples

How we built it

Architecture Design: We designed a clean separation between frontend and backend while maintaining seamless integration. The React app communicates with Deno functions through a smart endpoint detection system that works in both development and production.

Technology Stack:

  • Frontend: React 19, TypeScript, Vite, Tailwind CSS, shadcn/ui
  • Backend: Deno 2.x runtime with native TypeScript support
  • Deployment: Cloudflare Pages (frontend) + Deno Deploy (backend)
  • CI/CD: GitHub Actions with automated project creation
  • Development: Concurrent servers with hot reload

Key Implementation Details:

  1. Function Router System: Created a main.ts router that automatically discovers and routes to functions in the /functions directory
  2. Environment Detection: Smart API client that tries local development server first, then falls back to production endpoints
  3. Automated Deployment: GitHub Actions workflow that deploys to both platforms and syncs environment variables
  4. Theme System: Complete dark/light mode implementation with system preference detection
  5. Template Integration: GitHub CLI integration for one-command project creation

Challenges we ran into

Cross-Platform Deployment Coordination: The biggest challenge was coordinating deployments between Cloudflare Pages and Deno Deploy while ensuring the frontend always has the correct backend URL. We solved this by making the GitHub Actions workflow deploy Deno functions first, capture the URL, then inject it into the Cloudflare Pages environment.

Local Development Environment: Creating a seamless local development experience that mirrors production was complex. We implemented a concurrent server setup with intelligent endpoint detection that gracefully handles different development scenarios.

CORS and Cross-Origin Issues: Managing CORS between different domains (Cloudflare Pages and Deno Deploy) required careful configuration of headers and preflight request handling in the serverless functions.

Environment Variable Synchronization: Automatically syncing environment variables between GitHub, Cloudflare Pages, and Deno Deploy required custom API calls and careful error handling in the CI/CD pipeline.

Accomplishments that we're proud of

Zero-Configuration Deployment: Achieved true one-click deployment where developers only need to set three GitHub secrets and push to main branch - everything else is automated.

Developer Experience Excellence: Created a development environment where both frontend and backend hot-reload seamlessly, with intelligent fallback systems that work regardless of which services are running.

Production-Ready Template: Built a template that's not just a demo but actually production-ready with proper error handling, CORS configuration, environment management, and scalable architecture.

Modern Tech Stack Integration: Successfully integrated cutting-edge technologies (React 19, Deno 2.x, Cloudflare Pages) into a cohesive, stable development experience.

Comprehensive Documentation: Created extensive documentation with clear setup instructions, troubleshooting guides, and architectural explanations that make the project accessible to developers of all levels.

What we learned

Edge Computing Patterns: Gained deep insights into edge computing architecture and how to design applications that leverage global distribution for both static assets and serverless functions.

CI/CD Orchestration: Learned advanced GitHub Actions patterns for coordinating multi-platform deployments and managing cross-service dependencies.

Modern React Patterns: Explored React 19's new features and concurrent rendering capabilities while integrating with modern UI libraries like shadcn/ui.

Deno Runtime Capabilities: Discovered Deno's strengths in serverless environments, particularly its security model, native TypeScript support, and standard library quality.

Developer Experience Design: Learned how to design developer experiences that feel magical - where complex underlying systems are abstracted away but remain accessible when needed.

What's next for CloudFlare-Deno Boilerplate

Database Integration: Adding support for popular edge databases like Cloudflare D1, Supabase, and PlanetScale with pre-configured connection patterns.

Authentication System: Implementing a complete authentication system with JWT tokens, user management, and integration with popular auth providers.

API Framework: Developing a lightweight API framework for Deno that provides routing, middleware, validation, and OpenAPI documentation generation.

Monitoring & Analytics: Integrating observability tools like Cloudflare Analytics, Deno Deploy metrics, and error tracking for production applications.

Multi-Environment Support: Adding support for staging environments, feature branch deployments, and environment-specific configurations.

Plugin Ecosystem: Creating a plugin system that allows developers to easily add common functionality like email sending, file uploads, and payment processing.

Built with

  • React 19 - Latest React with concurrent features
  • TypeScript - Full-stack type safety
  • Deno 2.x - Modern JavaScript/TypeScript runtime
  • Vite - Next-generation frontend tooling
  • Tailwind CSS - Utility-first CSS framework
  • shadcn/ui - Beautiful React components
  • Radix UI - Accessible component primitives
  • Cloudflare Pages - Global edge hosting
  • Deno Deploy - Serverless edge functions
  • GitHub Actions - CI/CD automation
  • Lucide React - Beautiful icon library
  • pnpm - Fast, disk space efficient package manager

Ready for production • Lightning fast • Global deployment • Fully customizable

🚀 Get started: gh repo create my-project --template uratmangun/cloudflare-deno-kiro --public --clone

Built With

  • kiro
Share this project:

Updates

Submission history