构建 Full-Stack 应用不应每次都像从零开始

Source: Dev.to

介绍

在 BearStudio，我们经常启动新的 Web 项目。
每一次，起步的感觉都是一样的：我们花了好几个小时搭建基础设施，却还不能构建任何有意义的功能。

• 初始化一个 React + TypeScript 项目。
• 添加路由。
• 选择数据获取和变更的模式。
• 配置认证。
• 安装 Prisma 并处理迁移。
• 引入 Tailwind。
• 选取或自行构建 UI 组件。
• 添加 lint、测试、CI、Docker。

等到所有东西都就绪时，我们仍然没有交付真正的功能。这些并不算难，只是重复且在有趣的工作开始前消耗了精力。

正是这些让我们创建了 Start UI (web)，一个开源的全栈 starter。
仓库：

为什么选择 TanStack Start？

当我们调研 TanStack Start 时，它正好符合我们想要的开发者体验：明确、现代、类型安全，并且没有过多抽象。

• 为路由、数据加载和动作提供干净的基础。
• 让你保持对底层 React 与服务器模式的亲近。
• 提供结构但不强制锁定。

TanStack Start 并不试图解决所有问题，这一点我们很喜欢。它让基础保持简单，同时为架构决策留出空间。这正是我们自有技术栈发挥作用的地方。

oRPC 在哪里发挥作用

在客户端‑服务器通信方面，我们使用 oRPC。它不是 TanStack Start 的一部分，而是我们单独选用的方案，带来：

• 完全类型化的过程调用
• 更清晰的关注点分离
• 无需重复定义类型
• 可预测的请求与响应流

oRPC 负责业务逻辑边界，而 TanStack Start 负责路由和 UI 组合。两者配合良好，互不冲突。

我们想要消除的搭建痛点

我们创建 starter 并不是因为喜欢写模板代码，而是因为每个项目都会遇到相同的重复障碍：

• 重新构建已经解决过的项目结构。
• 重新编写几乎相同的认证流程。
• 手动配置 Prisma 并处理迁移。
• 为保持服务端和客户端类型一致而手动复制。
• 再次实现相同的 UI 基础组件。
• 推迟测试，事后后悔。
• 第 N 次准备 Docker。

每个问题单独看都不大，但它们叠加在一起会让项目刚进入正轨时就变慢。

Start UI (web) 从第一天起为你提供的内容

目标很简单：创建新项目时，你应该几乎可以立刻开始构建功能。

• 干净的 React + TypeScript 结构。
• 使用 TanStack Start 完成的路由配置。
• oRPC 提供完整类型的 API 过程。
• 通过 Better Auth 处理认证，已预先配置。
• Prisma 已接入并带有 schema 与迁移。
• 已安装 Tailwind，shadcn/ui 提供一套稳固的组件。
• 开箱即用的单元测试和端到端测试。
• ESLint、Prettier 与 CI 已就绪。
• Docker 可用于本地和生产环境。
• 包含最小化设计系统的 Storybook。

这套技术栈并不是用来限制你的，而是去除重复工作，让你专注于真正重要的事。

为什么这很重要

项目的前几天应该是令人兴奋的。当搭建阶段拖得太久，兴奋感会迅速消退。Start UI (web) 通过消除繁琐工作，帮助保持动能，让你更快看到实际进展并保持下去。

适用人群

这个 starter 适合：

• 经常启动新项目的机构和团队
• 寻求可靠基线的自由职业者
• 想在真实场景中体验 TanStack Start 的开发者
• 任何想省去模板代码、加速开发的人

它不是框架，也不僵硬。它是一个可以在其上自由构建的坚实基础。

开源且持续改进

我们在内部使用 Start UI (web)，每次遇到真实需求时都会对其进行改进。你可以在这里查看：

我们正努力在圣诞节前达到 2 000 星。如果它对你有帮助或激发了灵感，点个星星将意义非凡。

感谢阅读。如果你想讨论 TanStack Start、oRPC、Better Auth 或其他任何话题，随时欢迎交流。