JabStack
一个现代的、全栈的个人项目入门模板。使用SvelteKit、Turso、Better Auth、Stripe构建,并部署在Fly.io上。
特性
- 包子 -快速JavaScript运行时和包管理器
- SvelteKit 的 -支持SSR/SSG/SPA的全栈web框架
- 语言/SQLite -LibSQL用于生产,SQLite用于本地开发
- 更好的认证 -使用Google OAuth进行现代身份验证
- 条纹 -订阅的付款处理
- 重发 -交易电子邮件服务
- shadcn苗条 -仪表板的漂亮UI组件
- Bits用户界面 -营销页面的无头组件
- Fly.io -使用Docker进行边缘部署
快速入门
1. git clone https://github.com/yourusername/jabstack.git
2. cd jabstack
3. bun install
4. cp .env.example .env
5. bun run dev该应用程序运行于 http://localhost:5173 SQLite开箱即用。只有在中配置API密钥后,身份验证和支付才能工作 .env.
完整设置
先决条件
- 包子 安装
- CLI 课程 (可选,用于生产数据库)
- Stripe命令行界面 (可选,用于本地webhook测试)
- Fly CLI (可选,用于部署)
环境变量
这 .env.example 该文件为本地开发提供了合理的默认设置。您需要配置:
| 变量 | 必需 | 来源 |
|---|---|---|
BETTER_AUTH_SECRET | 认证 | openssl rand -base64 32 |
GOOGLE_CLIENT_ID | 谷歌OAuth | 谷歌云控制台 |
GOOGLE_CLIENT_SECRET | 谷歌OAuth | 谷歌云控制台 |
STRIPE_SECRET_KEY | 付款 | 条纹仪表板 |
STRIPE_WEBHOOK_SECRET | Webhooks | stripe listen --forward-to localhost:5173/api/stripe/webhook |
PUBLIC_STRIPE_PUBLISHABLE_KEY | 付款 | 条纹仪表板 |
RESEND_API_KEY | 电子邮件 | 重新发送仪表板 |
项目结构
jabstack/
├── src/
│ ├── lib/
│ │ ├── components/
│ │ │ ├── ui/ # shadcn-svelte components (dashboard)
│ │ │ ├── dashboard/ # Dashboard-specific components
│ │ │ └── marketing/ # Bits UI components (marketing)
│ │ ├── server/ # Server-only code
│ │ │ ├── db/ # Database (Drizzle)
│ │ │ ├── auth.ts # Better Auth config
│ │ │ ├── stripe.ts # Stripe config
│ │ │ └── email.ts # Resend config
│ │ ├── env.ts # Environment validation
│ │ └── utils.ts # Utility functions
│ └── routes/
│ ├── +page.svelte # Marketing home page
│ ├── auth/ # Auth pages
│ ├── dashboard/ # Dashboard pages
│ └── api/ # API routes
├── Dockerfile # Bun-based Docker image
├── fly.toml # Fly.io configuration
└── drizzle.config.ts # Drizzle ORM config脚本
bun run dev # Start development server
bun run build # Build for production
bun run preview # Preview production build
bun run test # Run tests
bun run db:generate # Generate database migrations
bun run db:migrate # Apply migrations
bun run db:studio # Open Drizzle Studio
bun run stripe:cli # Forward Stripe webhooks to localhostUI库
JabStack使用两个UI库用于不同的目的:
仪表板页面→ shadcn苗条
- 预先设计、一致的组件
- 位于
$lib/components/ui/ - 用于
/dashboard/*路线
营销页面→ Bits用户界面
- 用于定制设计的无头图元
- 位于
$lib/components/marketing/ - 用于所有非仪表板路线
数据库
本地开发
使用SQLite文件(local.db)为了简单起见。
生产
用途 图尔索 (libSQL)用于边缘分布式数据库。
# Create Turso database
turso db create jabstack
# Get connection URL
turso db show jabstack --url
# Get auth token
turso db tokens create jabstack部署
Fly.io
部署前,更新 fly.toml:
app-您的Fly.io应用程序名称PUBLIC_APP_URL在[build.args]-您的生产URL
# Create app
fly apps create your-app-name
# Set secrets
fly secrets set DATABASE_URL=libsql://... DATABASE_AUTH_TOKEN=...
fly secrets set BETTER_AUTH_SECRET=...
fly secrets set GOOGLE_CLIENT_ID=... GOOGLE_CLIENT_SECRET=...
fly secrets set STRIPE_SECRET_KEY=... STRIPE_WEBHOOK_SECRET=...
fly secrets set RESEND_API_KEY=...
# Deploy
fly deployMCP服务器
JabStack包括用于人工智能辅助开发的MCP服务器配置:
- 条纹MCP -查询条纹数据,管理产品/价格
- MCP系统 -查询数据库,探索模式
- shadcn MCP -通过自然语言浏览、搜索和安装shadcn-svelte组件
- Svelte MCP -提供Svelte/SvelteKit文档上下文和静态分析,以更好地生成代码
看 .mcp/mcp.json 用于配置。
文档
documentation/LLM_CONTEXT.md-AI助手上下文plans/jabstack-architecture.md-建筑细节
许可证
麻省理工学院
