ASSQ-CloudFlare Stack Documentation

Learn how to build modern web applications using Astro, SolidJS, Svelte, and Qwik together on CloudFlare.

Getting Started

Prerequisites

  • Node.js 18+ installed
  • npm or pnpm package manager
  • Basic knowledge of modern JavaScript/TypeScript
  • CloudFlare account (for deployment)

Installation

# Clone the repository
git clone https://github.com/your-repo/assq-cloudflare-stack.git

# Install dependencies
cd assq-cloudflare-stack
npm install

# Start development server
npm run dev

Architecture Overview

This template demonstrates how to combine multiple modern frameworks in a single application. Each framework serves different purposes and can be used independently or together.

Framework Roles

🚀 Astro - The Foundation

Astro serves as the main framework and build system. It provides:

  • Static site generation with partial hydration
  • File-based routing system
  • Component integration capabilities
  • Build optimization and bundling

⚡ SolidJS - Reactive UIs

SolidJS components are used for complex interactive features:

  • Fine-grained reactivity system
  • Counter components and interactive widgets
  • SPA-like behavior in specific sections
  • State management for dynamic content

🎯 Svelte - Simplified Components

Svelte is used for lightweight, self-contained components:

  • Pricing cards and marketing components
  • Compile-time optimizations
  • No runtime overhead
  • Simple state management

🏃 Qwik - Performance First

Qwik components focus on instant loading and performance:

  • Resumable applications
  • Zero hydration overhead
  • Lazy loading by default
  • Edge-optimized delivery

Project Structure

src/
├── components/                 # Shared utilities and docs
├── components-qwik/           # Qwik components
│   └── QwikCounter.tsx
├── components-solid/          # SolidJS components
│   ├── Counter.tsx
│   ├── DarkModeToggle.tsx
│   └── SolidCounter.tsx
├── components-svelte/         # Svelte components
│   ├── PricingCard.svelte
│   └── SvelteCounter.svelte
├── applications-solid/        # SolidJS SPA section
│   └── main-app/
│       ├── App.tsx
│       ├── components/
│       ├── pages/
│       └── middleware/
├── layouts/
│   └── Layout.astro          # Main layout template
├── pages/                    # Astro pages (file-based routing)
│   ├── index.astro           # Homepage
│   ├── docs/
│   ├── frameworks-test/      # Live demo page
│   └── solid-spa/           # SolidJS SPA catchall
└── styles/
    └── global.css           # Global styles and Tailwind

CloudFlare Integration

This template is optimized for CloudFlare Pages deployment with additional CloudFlare services:

CloudFlare Pages

  • Automatic deployments from Git
  • Global edge distribution
  • Built-in preview deployments
  • Custom domains and SSL

CloudFlare Workers

  • API endpoints and middleware
  • Edge computing capabilities
  • Request/response manipulation
  • Serverless functions

CloudFlare D1

  • SQLite database at the edge
  • Low latency data access
  • Automatic replication
  • SQL-based queries

CloudFlare R2

  • Object storage for assets
  • S3-compatible API
  • No egress fees
  • Global distribution

Development Workflow

Adding New Components

Choose the appropriate framework based on your component's requirements:

When to use each framework:

  • Astro: Static content, layouts, and pages that don't need client-side interactivity
  • SolidJS: Complex interactive components with state management and reactive updates
  • Svelte: Self-contained widgets and components with minimal bundle size requirements
  • Qwik: Performance-critical components that need instant loading and resumability

Building and Deployment

# Build for production
npm run build

# Preview production build locally
npm run preview

# Deploy to CloudFlare Pages
# Push to your connected Git repository or use wrangler CLI
wrangler pages publish dist

Configuration Files

Key configuration files that make this multi-framework setup work:

astro.config.mjs

Main Astro configuration with integrations for SolidJS, Svelte, and Qwik

tsconfig.json

TypeScript configuration with path mapping and framework-specific settings

wrangler.toml

CloudFlare Workers configuration for deployment and edge functions

svelte.config.js

Svelte preprocessing and integration configuration

Best Practices

✅ Do

  • Use Astro for static content and page structure
  • Choose the right framework for each component's needs
  • Leverage TypeScript for better development experience
  • Minimize client-side JavaScript by using Astro's partial hydration
  • Test components individually in their respective frameworks

❌ Don't

  • Mix multiple frameworks in a single component
  • Over-complicate simple components by using reactive frameworks
  • Forget to configure client-side hydration when needed
  • Ignore bundle size - choose lightweight frameworks for simple tasks
  • Skip testing framework-specific functionality

Examples and Demos

Visit the live demo page to see all frameworks working together. Each component demonstrates different capabilities and use cases.

Need Help?

Check out the individual framework documentation or explore the source code in the components directories. Each component includes inline comments explaining the implementation details.