shadcn/ui and tailwindcss v4 monorepo template

This template is for creating a monorepo with Turborepo, shadcn/ui, tailwindcss v4, and react v19.

项目结构

├── apps/
│   ├── backend/          # Hono 后端应用
│   └── web/              # Next.js 前端应用
├── packages/
│   ├── db/               # Prisma 数据库包
│   ├── storage/          # 存储解决方案包
│   ├── tus/              # TUS 上传协议包
│   └── ui/               # UI 组件包
└── docs/                 # 文档

特性

• 🚀 现代技术栈: Next.js 15, React 19, Hono, Prisma
• 📦 Monorepo: 使用 Turborepo 管理多包项目
• 🎨 UI 组件: shadcn/ui + TailwindCSS v4
• 📤 文件上传: 支持 TUS 协议的可恢复上传
• 💾 多存储支持: 本地存储 + S3 兼容存储
• 🗄️ 数据库: PostgreSQL + Prisma ORM
• 🔄 实时通信: WebSocket 支持

快速开始

1. 安装依赖

pnpm install

2. 环境变量配置

复制环境变量模板并配置：

cp .env.example .env

存储配置

本地存储（开发环境推荐）:

STORAGE_TYPE=local
UPLOAD_DIR=./uploads

S3 存储（生产环境推荐）:

STORAGE_TYPE=s3
S3_BUCKET=your-bucket-name
S3_REGION=us-east-1
S3_ACCESS_KEY_ID=your-access-key
S3_SECRET_ACCESS_KEY=your-secret-key

MinIO 本地开发:

STORAGE_TYPE=s3
S3_BUCKET=uploads
S3_ENDPOINT=http://localhost:9000
S3_ACCESS_KEY_ID=minioadmin
S3_SECRET_ACCESS_KEY=minioadmin
S3_FORCE_PATH_STYLE=true

详细的环境变量配置请参考：环境变量配置指南

3. 数据库设置

# 生成 Prisma 客户端
pnpm db:generate

# 运行数据库迁移
pnpm db:migrate

# 填充种子数据（可选）
pnpm db:seed

4. 启动开发服务器

pnpm dev

这将启动：

• 前端应用: http://localhost:3001
• 后端 API: http://localhost:3000
• 文件上传: http://localhost:3000/upload
• 存储管理 API: http://localhost:3000/api/storage

存储包 (@repo/storage)

项目包含一个功能完整的存储解决方案包，支持：

核心功能

• 🗂️ 多存储后端: 本地文件系统、AWS S3、MinIO、阿里云 OSS、腾讯云 COS
• 📤 TUS 上传: 支持可恢复的大文件上传
• 🔧 Hono 集成: 提供即插即用的中间件
• 📊 文件管理: 完整的文件生命周期管理
• ⏰ 自动清理: 过期文件自动清理机制
• 🔄 存储迁移: 支持不同存储类型间的数据迁移

API 端点

# 文件资源管理
GET    /api/storage/resources              # 获取所有资源
GET    /api/storage/resource/:fileId       # 获取文件信息
DELETE /api/storage/resource/:id           # 删除资源

# 文件访问和下载
GET    /download/:fileId                   # 文件下载和访问（支持所有存储类型）

# 统计和管理
GET    /api/storage/stats                  # 获取统计信息
POST   /api/storage/cleanup                # 清理过期文件
POST   /api/storage/migrate-storage        # 迁移存储类型

# 文件上传 (TUS 协议)
POST   /upload                             # 开始上传
PATCH  /upload/:id                         # 续传文件
HEAD   /upload/:id                         # 获取上传状态

使用示例

import { createStorageApp, startCleanupScheduler } from '@repo/storage';

// 创建存储应用
const storageApp = createStorageApp({
	apiBasePath: '/api/storage',
	uploadPath: '/upload',
});

// 挂载到主应用
app.route('/', storageApp);

// 启动清理调度器
startCleanupScheduler();

One-click Deploy

You can deploy this template to Vercel with the button below:

添加 UI 组件

To add components to your app, run the following command at the root of your web app:

pnpm dlx shadcn@latest add button -c apps/web

This will place the ui components in the packages/ui/src/components directory.

Tailwind

Your globals.css are already set up to use the components from the ui package which is imported in the web app.

使用组件

To use the components in your app, import them from the ui package.

import { Button } from '@repo/ui/components/ui/button';

脚本命令

# 开发
pnpm dev                    # 启动所有应用
pnpm dev:web               # 只启动前端
pnpm dev:backend           # 只启动后端

# 构建
pnpm build                 # 构建所有包
pnpm build:web             # 构建前端
pnpm build:backend         # 构建后端

# 数据库
pnpm db:generate          # 运行数据库迁移
pnpm db:seed               # 填充种子数据
pnpm db:studio             # 打开 Prisma Studio

# 代码质量
pnpm lint                  # 代码检查
pnpm type-check            # 类型检查
pnpm format                # 代码格式化

文档

• 环境变量配置指南
• 存储包文档
• 文件访问使用指南

More Resources

• shadcn/ui - Monorepo
• Turborepo - shadcn/ui
• TailwindCSS v4 - Explicitly Registering Sources
• Hono Documentation
• TUS Protocol