Vite Flare Starter

Vite Flare Starter

Scaffold a full-stack Cloudflare app from vite-flare-starter — React 19, Hono, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui, TanStack Query, R2, Wor

Category: development Source: jezweb/claude-skills

What Is Vite Flare Starter?

Vite Flare Starter is a batteries-included starter kit designed for rapid development of full-stack applications on Cloudflare’s edge platform. It combines modern frontend tooling with robust backend solutions, providing a scaffold that integrates React 19, Hono (running on Cloudflare Workers), D1 with Drizzle ORM, better-auth for authentication, Tailwind CSS v4, shadcn/ui, TanStack Query, and Cloudflare’s R2 and Workers AI. The result is a highly productive template for building scalable, performant applications that leverage Cloudflare’s global infrastructure. By running a single setup script, developers can clone, configure, and deploy a fully branded, production-ready application stack.

Why Use Vite Flare Starter?

Vite Flare Starter stands out for developers building applications that require edge compute, instant scalability, and modern developer experience. Its opinionated integrations reduce the friction of configuring disparate systems, enabling engineering teams to focus on product features rather than boilerplate setup.

Key advantages include:

  • Seamless Cloudflare Integration: All major Cloudflare products—Workers, D1, R2, Workers AI—are pre-wired with sensible defaults and best practices.
  • Modern Frontend Stack: Out-of-the-box support for React 19 and Vite ensures fast development and hot module reloading, while Tailwind CSS v4 and shadcn/ui provide design system flexibility.
  • Full-Stack Type Safety: Drizzle ORM offers type-safe database interactions, and TypeScript is used throughout the stack.
  • End-to-End Authentication: better-auth handles Google OAuth and email/password flows securely and efficiently.
  • Zero Infrastructure Overhead: The starter is optimized for serverless deployment, removing the need to manage servers or traditional hosting.

This starter is ideal for SaaS products, internal tools, and any application that would benefit from Cloudflare’s distributed edge capabilities and modern developer tooling.

How to Get Started

Vite Flare Starter is designed for rapid onboarding and deployment. The following steps outline how to scaffold a new project:

  1. Clone and Run Setup Script

    In your terminal, run:

    bash -c "$(curl -fsSL https://raw.githubusercontent.com/jezweb/vite-flare-starter/main/setup.sh)"

    This will prompt you for a project name, clone the template repo, and initialize Git.

  2. Configure Cloudflare Bindings

    The setup script will guide you through configuring your wrangler.toml file for Cloudflare Workers, D1, R2, and Workers AI:

    [[d1_databases]]
binding = "DB"
database_name = "myapp-db"
database_id = "your-d1-id"

[[r2_buckets]]
binding = "AVATARS"
bucket_name = "myapp-avatars"

[[r2_buckets]]
binding = "FILES"
bucket_name = "myapp-files"

[ai]
binding = "AI"

  3. Install Dependencies

    Navigate into the project directory and install dependencies:

    cd my-vite-flare-app
npm install

  4. Local Development

    Start the local development server:

    npm run dev

    This will launch the Vite development server and the Hono backend via Cloudflare Workers’ local emulator.

  5. Deploy to Cloudflare

    When ready, deploy with:

    npm run deploy

    This uses Wrangler to deploy your app and associated bindings to Cloudflare.

Key Features

Vite Flare Starter provides a comprehensive, pre-configured stack:

  • Frontend

    • React 19: Latest features including useOptimistic, useActionState, and more.
    • Vite 6.x: Lightning-fast HMR, optimized builds.
    • Tailwind CSS v4 + shadcn/ui: Utility-first styling with customizable component library.
    • TanStack Query v5: Powerful data fetching and caching.
    // src/client/hooks/useUser.ts
import { useQuery } from '@tanstack/react-query';

export function useUser() {
  return useQuery(['user'], async () => {
    const res = await fetch('/api/me');
    if (!res.ok) throw new Error('Failed to load user');
    return res.json();
  });
}

  • Backend

    • Hono 4.x: Expressive, fast, and edge-optimized routing.

    • D1 + Drizzle ORM: Type-safe, serverless SQL at the edge.

      // src/server/routes/users.ts
import { drizzle, users } from '../db';
app.get('/api/users', async (c) => {
  const db = drizzle(c.env.DB);
  return c.json(await db.select().from(users));
});

    • better-auth: Secure authentication, with pre-configured Google OAuth and email/password flows.

  • Cloudflare Bindings

    • R2: S3-compatible storage for files and avatars.
    • Workers AI: Easily call AI models with simple bindings.

  • Structure

    Organized source code, with clear separation between client and server, and extensive use of TypeScript for maintainability.

Best Practices

  • Leverage Edge Capabilities: Use D1 and Workers AI for global, low-latency data and inference.
  • Keep Secrets Secure: Store environment variables and credentials in Cloudflare’s secret store, not in source code.
  • Type Safety: Use Drizzle ORM and TypeScript throughout to prevent runtime errors.
  • Incremental Adoption: Start with core features, then layer on R2 storage, AI, or advanced queries as needed.
  • Component Reusability: Use shadcn/ui and Tailwind to build a consistent, reusable UI library.
  • Testing: Integrate with Vitest or your preferred test library for frontend and backend code.

Important Notes

  • Cloudflare Account Required: You must have a Cloudflare account with access to Workers, D1, R2, and (optionally) Workers AI.
  • Billing Considerations: Some features (e.g., D1, R2) may incur usage-based charges beyond free tier limits.
  • Custom Domain Setup: For production, configure your Cloudflare DNS and SSL settings as needed.
  • Automatic Updates: While Vite Flare Starter is actively maintained, periodically review upstream dependencies for security and compatibility.
  • Community and Support: Consult the official repository for documentation, issue tracking, and updates.

Vite Flare Starter is a powerful foundation for building, scaling, and deploying full-stack Cloudflare applications with minimal friction and maximum flexibility.