React Vite + Hono API with Turborepo

A modern full-stack monorepo featuring React with Vite for the frontend and Hono for the backend API, all orchestrated with Turborepo.

🏗️ Architecture Overview

cf-stack-sample/
├── apps/
│   ├── api/              # Hono API server
│   └── web/             # React Vite frontend
└── packages/
    ├── ui/              # Shared React components
    ├── constants/       # Shared constants
    ├── eslint-config/   # ESLint configurations
    └── typescript-config/ # TypeScript configurations

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

# Clone the repository
git clone <repository-url>
cd cf-stack-sample

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

Development

# Start all applications in development mode
npm run dev
# or
npx turbo dev

# Start specific application
npx turbo dev --filter=web    # React Vite app on :3001
npx turbo dev --filter=api    # Hono API on :3000

Build for Production

# Build all applications
npx turbo build

# Build specific application
npx turbo build --filter=web
npx turbo build --filter=api

📦 Applications

🌐 Web App (React + Vite)

• Location: apps/web/
• Port: 3001
• Tech Stack: React 19, Vite, TypeScript, CSS Modules
• Features:
  • ⚡ Fast HMR development
  • 🎨 Modern CSS with modules
  • 🔗 CORS-enabled API integration
  • 📱 Responsive design

Access: http://localhost:3001

🔌 API Server (Hono)

• Location: apps/api/
• Port: 3000
• Tech Stack: Hono, TypeScript
• Features:
  • ⚡ Ultra-fast HTTP server
  • 🛡️ Built-in CORS support
  • 📊 TypeScript types
  • 🔄 Hot reload in development

Access: http://localhost:3000

📦 Shared Packages

@repo/ui

Shared React component library used across applications. Currently includes:

• Reusable UI components
• Shared styles and themes
• Component documentation

@repo/constants

Shared constants and configuration used across applications:

• Environment variables
• API endpoints
• Configuration values

@repo/eslint-config

Shared ESLint configuration ensuring code consistency:

• React best practices
• TypeScript rules
• Prettier integration

@repo/typescript-config

Shared TypeScript configuration:

• Strict type checking
• Path aliases
• Modern TypeScript features

🛠️ Development Workflow

1. Making Changes

• Edit components in packages/ui/ for shared functionality
• Modify apps/web/src/ for frontend changes
• Update apps/api/src/ for backend changes

2. Type Safety

• Full TypeScript support across all packages
• Shared types between frontend and backend
• Automated type checking with npm run check-types

3. Code Quality

• ESLint for code linting
• Prettier for code formatting
• Pre-commit hooks for quality assurance

🚀 Deployment

Frontend (React Vite)

# Build the frontend
cd apps/web
npm run build

# Preview production build
npm run preview

Backend (Hono API)

# Build the API
cd apps/api
npm run build

# Start production server
npm start

Deployment Platforms

• Frontend: Vercel, Netlify, Cloudflare Pages
• Backend: Railway, Render, Fly.io, Cloudflare Workers
• Database: Supabase, PlanetScale, Neon

🔧 Configuration

Environment Variables

Create .env files in respective app directories:

# apps/web/.env
VITE_API_URL=https://your-api.com

# apps/api/.env
PORT=3000
CORS_ORIGIN=https://your-frontend.com

Path Aliases

• @/* points to src/ in each app
• @repo/* points to shared packages

📚 Useful Commands

# Development
npx turbo dev              # Start all apps
npx turbo dev --filter=web # Start web app only
npx turbo dev --filter=api # Start API only

# Building
npx turbo build            # Build all apps
npx turbo build --filter=web
npx turbo build --filter=api

# Code Quality
npx turbo lint             # Lint all packages
npx turbo check-types      # Type check all packages

# Cleaning
npx turbo clean            # Clean all build artifacts

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Turborepo for the amazing monorepo tooling
• React for the frontend framework
• Vite for the blazing fast build tool
• Hono for the ultra-fast web framework

---

For more information, visit the Turborepo documentation.