Vite Starter with Cloudflare Workers, React, Tailwind & RPC

A modern full-stack starter template for building web applications with Cloudflare Workers, React, Tailwind CSS, and type-safe RPC communication.

Features

• 🚀 Full-Stack Development: Seamless integration between frontend and backend
• ⚡ Vite + React: Lightning-fast HMR with React 19 and TypeScript
• 💅 Tailwind CSS + shadcn/ui: Beautiful, customizable UI components
• 🔄 Type-Safe RPC: End-to-end type safety with automatic code generation
• 🌐 Edge Computing: Deploy globally with Cloudflare Workers
• 🛠️ Modern Dev Tools: ESLint, Prettier, and testing with Vitest

Tech Stack

Frontend

• React 19 - UI library
• Vite - Fast development environment
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Accessible UI components built with Radix UI and Tailwind
• TypeScript - Type safety and developer experience
• React Hooks - Custom hooks for RPC communication
• Lucide React - Beautiful, consistent icons
• use-toastr - Toast notifications

Backend

• Cloudflare Workers - Serverless edge runtime
• Type-safe RPC - End-to-end type safety between frontend and worker
• TypeScript - Strongly-typed API endpoints

Getting Started

Prerequisites

• Node.js (v16+)
• Yarn or npm
• Cloudflare account (for deployment)

Quick Start

1. Clone the repository:

git clone https://github.com/feliperohdee/cloudflare-react-tailwind-client.git my-project
cd my-project

2. Install dependencies:

yarn install

3. Start the development server:

yarn dev

This will start the Vite development server at http://localhost:3000 with hot module replacement for real-time updates.

Project Structure

├── app/                  # React frontend application
│   ├── components/       # React components
│   │   └── ui/           # shadcn/ui components
│   ├── hooks/            # Custom hooks
│   ├── libs/             # Utility functions
│   ├── pages/            # Page components
│   └── styles/           # Global styles
│
├── worker/               # Cloudflare Worker code
│   └── rpc/              # RPC implementation
│
├── public/               # Static files
├── wrangler.toml         # Cloudflare Workers configuration
└── package.json          # Project dependencies and scripts

Available Commands

Development

• yarn dev - Start the development server
• yarn build - Build the project for production
• yarn preview - Preview the production build locally

Deployment

• yarn deploy - Build and deploy to Cloudflare Workers

Code Quality

• yarn lint - Run ESLint to check code quality
• yarn test - Run tests using Vitest testing framework
• yarn cf-typegen - Generate TypeScript types for Cloudflare Workers

UI Components

• yarn add-component [name] - Install and configure shadcn/ui components

Adding UI Components

This project uses shadcn/ui components. You can add new components using:

yarn add-component button

Available components include: button, card, dialog, dropdown-menu, input, label, select, and many more from the shadcn/ui collection.

RPC Communication

This starter uses type-safe RPC for communication between the frontend and the Worker:

// Frontend (React component)
const { resource, rpc } = useRpc();
const { data, fetch, loading, setData } = resource('hello', {
	message: 'Cloudflare'
});

// Worker RPC Implementation
class Rpc {
	async hello({ message }: { message: string }) {
		return { message: `Hello, ${message}!` };
	}
}

Key benefits:

• Full type safety between frontend and backend
• Automatic code generation
• Simple, intuitive API with React hooks

Deployment

1. Build your application:

yarn build

2. Deploy to Cloudflare Workers:

yarn deploy

Documentation & Resources

• Cloudflare Workers Documentation
• shadcn/ui Components
• Full Project Documentation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Felipe Rohde

Author

Felipe Rohde

• Twitter: @felipe_rohde
• Github: @feliperohdee
• Email: feliperohdee@gmail.com