LogoShipSaaS

项目结构

ShipSaaS 模板文件和文件夹组织概述

ShipSaaS 遵循基于 TanStack Router 文件路由的模块化架构,专注于可扩展性和可维护性。

根目录结构

src

api

auth

components

config

db

env

hooks

lib

mail

messages

middlewares

newsletter

notification

payment

storage

routes

types

styles.css

content

public

scripts

biome.json

content-collections.ts

drizzle.config.ts

drizzle.config.local.ts

vite.config.ts

wrangler.jsonc

关键文件

  • vite.config.ts:Vite 配置,含 ShipStack (NextJS)、Cloudflare、Tailwind CSS 和 Content Collections 插件
  • wrangler.jsonc:Cloudflare Workers 配置,包括 D1 数据库和 R2 存储绑定
  • content-collections.ts:博客、法律条款页面和更新日志的 Content Collections 配置
  • drizzle.config.ts:数据库的 Drizzle ORM 配置
  • biome.json:Biome 代码检查和格式化配置
  • .env.example:环境变量模板

关键目录

/src/api 目录

按功能组织的服务端 API 逻辑:

contact.ts

newsletter.ts

payment.ts

user-files.ts

users.ts

/src/lib 目录

核心应用程序逻辑和实用程序:

blog.ts

changelog.ts

formatter.ts

markdown.ts

pages.ts

price-plan.ts

routes.ts

seo.ts

urls.ts

utils.ts

/src/routes 目录

routes 目录遵循 TanStack Router 文件路由约定:

__root.tsx

index.tsx

auth

dashboard

settings

admin

(pages)

(legals)

blog

api

/src/components 目录

组件按功能和用途组织,以便更好地维护:

共享组件

共享组件在整个应用程序中可重用,并在专用目录中组织:

ui

blocks

layout

shared

theme

analytics

chatbox

affiliate

功能模块的组件

组件目录按功能组织,便于定位和维护与特定功能相关的组件,如身份验证、博客、仪表盘等。

admin

auth

blog

changelog

contact

dashboard

payment

pricing

settings

waitlist

下一步

现在您了解了项目结构,探索这些相关主题:

On this page