Create a boilerplate for a new project using Cloudflare Workers + Remix + D1 + Prisma
Generates a fullstack boilerplate using Cloudflare Workers, Remix, D1, and Prisma with Turborepo.
/plugin marketplace add kaneshin/dotfiles/plugin install kaneshin-claude-code-plugin@kaneshin-dotfiles-marketplace新規フルスタックアプリケーションのボイラープレートを作成するコマンドです。
このコマンドは以下の技術スタックを使用した新規プロジェクトを生成します:
まず、ユーザーに以下の情報を質問してください:
必須項目:
my-app, inventory-system)~/projects/my-app)オプション項目:
以下のディレクトリ構造を作成します:
{project-name}/
├── apps/
│ ├── api/ # Hono (Cloudflare Workers)
│ │ ├── src/
│ │ │ ├── index.ts # エントリーポイント
│ │ │ ├── routes/ # API routes
│ │ │ ├── middleware/ # 認証・エラーハンドリング
│ │ │ └── lib/ # ユーティリティ
│ │ ├── wrangler.toml # Cloudflare Workers設定
│ │ ├── package.json
│ │ └── tsconfig.json
│ └── web/ # Remix (Cloudflare Pages)
│ ├── app/
│ │ ├── routes/ # ページルート
│ │ ├── components/ # UI components
│ │ ├── lib/ # API client, utilities
│ │ └── root.tsx # ルートレイアウト
│ ├── public/
│ ├── package.json
│ ├── remix.config.js
│ ├── tsconfig.json
│ └── tailwind.config.ts
├── packages/
│ ├── database/ # Prisma
│ │ ├── prisma/
│ │ │ └── schema.prisma # データベーススキーマ
│ │ ├── migrations/ # D1 migrations
│ │ ├── package.json
│ │ └── tsconfig.json
│ ├── shared/ # 共有型・定数
│ │ ├── src/
│ │ │ ├── constants/
│ │ │ ├── schemas/ # Zod schemas
│ │ │ └── index.ts
│ │ ├── package.json
│ │ └── tsconfig.json
│ └── ui/ # shadcn/ui components
│ ├── src/
│ ├── package.json
│ └── tsconfig.json
├── docs/
│ ├── specs/
│ │ ├── features/
│ │ └── backlog/
│ └── implementation/
├── .gitignore
├── package.json # Root package.json
├── pnpm-workspace.yaml # pnpm workspaces
├── turbo.json # Turborepo config
├── PLAN.md # プロジェクト計画
├── README.md
└── CLAUDE.md # Claude Code用ガイド
{
"name": "{project-name}",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "turbo dev",
"build": "turbo build",
"typecheck": "turbo typecheck",
"db:generate": "turbo db:generate",
"db:migrate": "cd packages/database && npm run migrate"
},
"devDependencies": {
"turbo": "^2.3.3",
"typescript": "^5.7.2"
},
"packageManager": "pnpm@9.15.0",
"engines": {
"node": ">=20.0.0",
"pnpm": ">=9.0.0"
}
}
packages:
- "apps/*"
- "packages/*"
{
"$schema": "https://turbo.build/schema.json",
"globalDependencies": ["**/.env"],
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**", ".remix/**"]
},
"dev": {
"cache": false,
"persistent": true
},
"typecheck": {
"dependsOn": ["^build"]
},
"db:generate": {
"cache": false
}
}
}
# Dependencies
node_modules/
.pnp
.pnp.js
# Build outputs
dist/
.next/
.remix/
.wrangler/
.vercel/
# Environment
.env
.env.local
.dev.vars
# Database
*.db
*.db-journal
.wrangler/state/
# IDE
.vscode/
.idea/
*.swp
*.swo
*~
# OS
.DS_Store
Thumbs.db
# Logs
*.log
npm-debug.log*
# Turbo
.turbo/
{
"name": "@{project-name}/api",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "wrangler dev",
"build": "wrangler deploy --dry-run --outdir=dist",
"typecheck": "tsc --noEmit",
"deploy": "wrangler deploy",
"migrate": "wrangler d1 migrations apply {project-name}-db --local",
"migrate:prod": "wrangler d1 migrations apply {project-name}-db --remote"
},
"dependencies": {
"hono": "^4.6.15",
"@{project-name}/shared": "workspace:*",
"@{project-name}/database": "workspace:*"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20241218.0",
"wrangler": "^3.97.0",
"typescript": "^5.7.2"
}
}
name = "{project-name}-api"
main = "src/index.ts"
compatibility_date = "2024-12-01"
[[d1_databases]]
binding = "DB"
database_name = "{project-name}-db"
database_id = "" # 後でwrangler d1 createで設定
[observability]
enabled = true
import { Hono } from "hono";
import { cors } from "hono/cors";
type Bindings = {
DB: D1Database;
};
const app = new Hono<{ Bindings: Bindings }>();
// CORS設定
app.use("*", cors());
// ヘルスチェック
app.get("/health", (c) => {
return c.json({ status: "ok", timestamp: new Date().toISOString() });
});
// API routes
app.get("/api", (c) => {
return c.json({ message: "Welcome to {project-name} API" });
});
export default app;
{
"name": "@{project-name}/web",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "remix vite:dev",
"build": "remix vite:build",
"typecheck": "tsc --noEmit",
"deploy": "npm run build && wrangler pages deploy ./build/client"
},
"dependencies": {
"@remix-run/cloudflare": "^2.15.3",
"@remix-run/cloudflare-pages": "^2.15.3",
"@remix-run/react": "^2.15.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@{project-name}/shared": "workspace:*"
},
"devDependencies": {
"@remix-run/dev": "^2.15.3",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"typescript": "^5.7.2",
"vite": "^6.0.7",
"tailwindcss": "^3.4.17",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49"
}
}
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/cloudflare";
import "./tailwind.css";
export const links: LinksFunction = () => [];
export default function App() {
return (
<html lang="ja">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
import type { MetaFunction } from "@remix-run/cloudflare";
export const meta: MetaFunction = () => {
return [
{ title: "{Project Name}" },
{ name: "description", content: "Welcome to {Project Name}!" },
];
};
export default function Index() {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">{Project Name}</h1>
<p className="text-gray-600">
Cloudflare Workers + Remix + D1 + Prisma
</p>
</div>
</div>
);
}
{
"name": "@{project-name}/database",
"version": "0.1.0",
"private": true,
"scripts": {
"db:generate": "prisma generate",
"migrate": "wrangler d1 migrations apply {project-name}-db --local"
},
"dependencies": {
"@prisma/adapter-d1": "^5.23.0",
"@prisma/client": "^5.23.0"
},
"devDependencies": {
"prisma": "^5.23.0",
"wrangler": "^3.97.0"
}
}
generator client {
provider = "prisma-client-js"
previewFeatures = ["driverAdapters"]
}
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
// Example: Users table
model User {
id String @id
email String @unique
name String
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
@@map("users")
}
{
"name": "@{project-name}/shared",
"version": "0.1.0",
"private": true,
"type": "module",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"scripts": {
"build": "tsc",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"zod": "^3.24.1"
},
"devDependencies": {
"typescript": "^5.7.2"
}
}
export * from "./constants/index.js";
export * from "./schemas/index.js";
// Project constants
export const APP_NAME = "{Project Name}";
export const APP_VERSION = "0.1.0";
# {Project Name}
{Project description}
## Tech Stack
- **Frontend**: Remix on Cloudflare Pages
- **Backend API**: Hono on Cloudflare Workers
- **Database**: D1 (SQLite) + Prisma ORM
- **UI**: shadcn/ui + Tailwind CSS
- **Monorepo**: Turborepo + pnpm workspaces
## Getting Started
### Prerequisites
- Node.js >= 20.0.0
- pnpm >= 9.0.0
### Installation
\`\`\`bash
# Install dependencies
pnpm install
# Generate Prisma client
pnpm db:generate
# Run development servers
pnpm dev
\`\`\`
## Project Structure
See [CLAUDE.md](./CLAUDE.md) for detailed project structure and development guidelines.
## Documentation
- [PLAN.md](./PLAN.md) - Project planning and roadmap
- [CLAUDE.md](./CLAUDE.md) - Development guide for Claude Code
## License
Private
# PLAN
## Project Overview
**Project Name**: {Project Name}
**Description**: {Project description}
## Tech Stack
- **Frontend**: Remix on Cloudflare Pages
- **Backend API**: Hono on Cloudflare Workers
- **Database**: D1 (SQLite) + Prisma ORM
- **UI**: shadcn/ui + Tailwind CSS
- **Monorepo**: Turborepo + pnpm workspaces
## Implementation Status
### ✅ 実装済み機能
- プロジェクト基盤セットアップ
- 基本的なAPI/Webアプリ構造
### 📋 バックログ
- 認証機能 (Google OAuth + JWT)
- データベースマイグレーション
- UI コンポーネントライブラリ
## Development Principles
- **KISS原則**: シンプルで保守しやすいコードを優先
- **YAGNI原則**: 必要最小限の機能から開始し、段階的に拡張
- **API ファースト**: モバイルアプリ対応を前提とした設計
# {Project Name} - Claude Code Guide
This document provides guidance for Claude Code instances working in this repository.
## Project Overview
**{Project Name}** is a {description} built as a modern web application:
- **Stack**: Cloudflare Workers (Hono) + Cloudflare Pages (Remix) + D1 (SQLite)
- **Architecture**: Monorepo using Turborepo + pnpm workspaces
- **Database ORM**: Prisma with D1 adapter
## Common Commands
### Development Setup
\`\`\`bash
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Generate Prisma client
pnpm db:generate
# Apply migrations locally
pnpm db:migrate
# Start development servers
pnpm dev
\`\`\`
### Build & Type Checking
\`\`\`bash
# Build entire monorepo
pnpm build
# Type check all packages
pnpm turbo run typecheck
\`\`\`
### Database Migrations
\`\`\`bash
cd ./packages/database
# Create migration file
wrangler d1 migrations create {project-name}-db <migration_name>
# Generate SQL diff
prisma migrate diff \\
--from-local-d1 \\
--to-schema-datamodel ./prisma/schema.prisma \\
--script \\
--output ./migrations/<number>_<migration_name>.sql
# Apply migration locally
npm run migrate
\`\`\`
## References
- Project plan: `PLAN.md`
- Installation: `README.md`
- Turborepo config: `turbo.json`
- Database schema: `packages/database/prisma/schema.prisma`
すべてのファイルを生成した後、以下のコマンドを実行します:
# プロジェクトディレクトリに移動
cd {project-directory}
# 依存関係のインストール
pnpm install
# Prisma クライアント生成
pnpm db:generate
# ビルド確認
pnpm build
# 型チェック
pnpm turbo run typecheck
セットアップ完了後、ユーザーに以下の次のステップを提示します:
D1データベースの作成:
cd apps/api
wrangler d1 create {project-name}-db
# 出力されたdatabase_idをwrangler.tomlに設定
開発サーバーの起動:
pnpm dev
追加機能の実装(オプション):
$ARGUMENTS - オプション引数
--with-auth: Google OAuth認証機能を追加--entity <name>: 初期エンティティを追加(例: --entity Product)# 基本的なボイラープレート生成
/create-cloudflare-fullstack
# 認証機能付きで生成
/create-cloudflare-fullstack --with-auth
# 認証+初期エンティティ(Product)
/create-cloudflare-fullstack --with-auth --entity Product
必須ファイル (常に生成):
オプション機能 (引数で指定):
--with-auth)--entity <name>)--with-ui)pnpm install が失敗する:
# pnpm のバージョンを確認
pnpm --version
# 必要に応じてアップデート
npm install -g pnpm@latest
Prisma が生成できない:
# packages/database で直接実行
cd packages/database
npx prisma generate
TypeScript エラー:
# 全パッケージをビルド
pnpm build
# shared パッケージを先にビルド
cd packages/shared
pnpm build
このボイラープレートは出発点として使用してください。プロジェクトの要件に応じて以下をカスタマイズできます:
packages/database/prisma/schema.prisma)apps/api/src/routes/)apps/web/app/components/)packages/shared/src/)このボイラープレートはBrewdayプロジェクトをベースにしていますが、以下の点で異なります: