t4-app

<p align="center"> <a href="https://t4stack.com" target="_blank" rel="noopener noreferrer"> <picture> <img src="https://yellow-cdn.veclightyear.com/835a84d5/e45ae826-89f3-4fc5-835e-c4b58e13f84c.png?raw=true" width="200" alt="Create T4 App 的标志"> </picture> </a> </p> <h1 align="center"> create-t4-app </h1> <p align="center"> 交互式命令行工具，用于在 Cloudflare 的边缘平台上启动全栈、类型安全、通用的 Expo 和 Next.js 应用程序。 </p> <p align="center"> 通过运行 <code>bun create t4-app</code> 开始使用 <a rel="noopener noreferrer" target="_blank" href="https://t4stack.com">T4 Stack</a> </p> <p align="center"> <a href = "https://discord.gg/wj2GV7AvQd"> <img src="https://img.shields.io/discord/1117289587472081016?color=%235865F2&label=Discord&logo=discord&logoColor=white&style=for-the-badge" alt="加入 T4 Discord 社区"> </a>&nbsp; <a href = "https://www.npmjs.com/package/create-t4-app"> <img src="https://img.shields.io/npm/dm/create-t4-app?logo=npm&style=for-the-badge&color=CC3534" alt="create-t4-app 在 npmjs.org 上的每周下载量"> </a>&nbsp; <a href="https://marketplace.visualstudio.com/items?itemName=albbus.t4-app-tools"> <img src="https://img.shields.io/visual-studio-marketplace/i/albbus.t4-app-tools?logo=visual-studio-code&style=for-the-badge&color=0078D7" alt="VSCode 扩展安装量"> </a> </p> ## 🍔 T4 技术栈

T4 技术栈是由 Tim Miller 创建的通用网页和原生应用开发技术栈，专注于开发者体验、快速开发和性能。

与 Cloudflare 服务（如 R2 和 D1）的轻松集成，使开发者能够以比 AWS 更低的成本构建具有AI 驱动功能的应用。

立即部署，体验6 秒钟的包安装时间和30 秒钟的后端部署。

👉 更多文档可以在 T4 技术栈网站 上找到。👈

<br> <p align="center"> <a href="https://pages.cloudflare.com/"> <img src="https://img.shields.io/badge/Cloudflare%20Pages-F38020?style=for-the-badge&logo=Cloudflare%20Pages&logoColor=white" alt="T4 兼容 Cloudflare Pages"> </a>&nbsp; <a href="https://nextjs.org/"> <img src="https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white" alt="T4 使用 Next.js"> </a>&nbsp; <a href="https://expo.dev/"> <img src="https://img.shields.io/badge/Expo-1B1F23?style=for-the-badge&logo=expo&logoColor=white" alt="T4 使用 Expo"> </a>&nbsp; <a href="https://www.typescriptlang.org/"> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="T4 使用 TypeScript 编写"> </a> </p>

📐 UI 工具包

• 🎨 Tamagui

🔮 前端

• 🔗 Next.js
• 📱 Expo

📡 数据获取

• 🔄 tRPC
• ⏲️ Tanstack Query
• 🎂 ts-pattern
• 数据获取 UI 状态处理示例：

📈 性能优化

• 💨 Million.js
• React 的虚拟 DOM 替代方案
• 实现类似 SolidJS 的 React 性能
• 🎂 PattyCake
• 使用 ts-pattern 实现零运行时模式匹配

✅ 类型验证

• 🤖 Valibot

🧭 路由

• 📲 Expo Router
• ☀️ Solito

🏢 全局状态管理

• 🧩 Jotai

⚙️ 后端

• 🔥 Hono
• 💚 Cloudflare Workers
• 📁 Cloudflare D1
• 边缘计算的 SQLite 数据库
• 🗄️ Drizzle

🔒 身份认证

• 🔑 Supabase

📖 背景

T4 是一个项目启动套件，用于使用 Tamagui、tRPC 和 Tauri 构建类型安全、原生和网页应用程序。部署到 Cloudflare 以获得全球边缘网络。所有这些的成本仅为 AWS、Vercel 或 Azure 的一小部分。

它提供了一个统一、有主见且极简的设置，可以快速开始构建原生和网页应用，使用相同的代码，无需担心设置开发环境的复杂性。

💪 为所有平台构建应用

• 📱 iOS
• 🤖 安卓
• 🕸️ 网页
• 支持渐进式网页应用（PWA）
• 💻 macOS
• 🪟 Windows
• 🐧 Linux
• 🧪 （实验性）通过 Tauri 支持桌面

使用相同的代码库为 iOS、安卓、macOS、Windows 和 Linux 构建原生应用。

再也不用担心使用 XCode 或 Android Studio

<p align="left"> <a href="https://developer.android.com/studio"> <img src="https://img.shields.io/badge/Android_Studio-3DDC84?style=for-the-badge&logo=android-studio&logoColor=white" alt="Android Studio"> </a>&nbsp; <a href="https://developer.apple.com/xcode/"> <img src="https://img.shields.io/badge/Xcode-007ACC?style=for-the-badge&logo=Xcode&logoColor=white" alt="XCode"> </a> </p> ## 🚀 快速开始

基本设置

使用 create-t4-app 需要 bun v1.0 版本

<p align="left"> <a href="https://bun.sh"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/2254a1bd-f567-447f-a291-8131044e4f10.svg?style=for-the-badge&logo=bun&logoColor=f69220" alt="使用 `create-t4-app` 需要 bun"> </a> </p>

要使用 create-t4-app 搭建应用程序，请运行以下任一命令。

bun

bun create t4-app

Tauri

如果您想使用 Tauri，请使用：

bun create t4-app --tauri

❓ 为什么选择 T4？

T4 是经过广泛研究和测试后，为 React Native 和 Web 开发确定的最佳库组合。我们已经为您完成了艰巨的工作，因此您可以专注于构建出色的应用程序，而无需担心性能瓶颈。

无论您是使用 React Native 开发移动应用还是使用 React 开发 Web 应用，T4 都是完美的选择。我们的模板设计可以无缝集成到您现有的项目中，让您轻松提升性能，无需从头开始。

🚅 性能优势

• 👉 6 秒内完成软件包安装
• 👉 30 秒内完成后端部署
• 👉 90 秒内完成前端部署
• 学习曲线平缓
• 即时反馈，快速开发
• 适用于 React Native 和 React Web
• 数据获取
• 样式设计
• 身份验证
• 导航
• 类型安全
• 高代码复用率
• 低打包体积
• 兼容边缘计算
• 快速启动时间
• 简单设置
• 在需要时允许平台特定代码

📦 包含内容

• Tamagui - 用于构建美观且响应式用户界面的UI工具包。
• TanStack - 为React开发者提供的高质量开源软件。
• tRPC - 用于构建端到端类型安全API的TypeScript框架。
• TypeScript - JavaScript的类型化超集，可编译为纯JavaScript。

🧩 VSCode 扩展

VSCode 扩展是可选的，但强烈推荐使用。它通过提供代码操作来帮助你搭建应用程序，从而提供更好的开发体验。你可以在文档中找到更多信息，或者从 VSCode 市场安装它。

✨ 特性

• ✅ 6秒安装包时间
• ✅ 30秒后端部署
• ✅ 90秒前端部署
• ✅ 全平台使用Tamagui UI套件
• ✅ 支持Bun
• ✅ 支持Million.js
• ✅ 支持PattyCake
• ✅ 支持Valibot
• ✅ 从Drizzle架构生成Valibot类型守卫
• ✅ Supabase身份验证
• ✅ 使用Next.js构建网页应用
• ✅ 使用Expo构建原生移动应用
• ✅ 默认PWA支持原生桌面应用，无需Electron
• ✅ 使用Cloudflare Workers实现无服务器函数
• ✅ 无需Docker容器
• ✅ 使用tRPC和Tanstack Query实现全平台数据获取和缓存
• ✅ 全平台身份验证
• ✅ 采用TypeScript提供类型安全和更佳的开发体验
• ✅ 预配置Biome实现超快速代码一致性
• ✅ Expo应用的Github Action发布
• ✅ CI/CD中的数据库迁移
• ✅ 支持Tauri

⭐ 愿望清单

👉 愿望清单已移至文档网站。

💬 社区

如需帮助、讨论最佳实践，或任何其他有利于create-t4-app的对话： 加入T4 Discord服务器

🫶 贡献者

我们欢迎任何人的贡献。请阅读我们的贡献指南，了解如何开始参与的更多信息。

👏 特别鸣谢

• Nate Birdman - Tamagui 的创始人
• Aiden Bai - Million.js 和 PattyCake 的创始人
• Yusuke Wada - Hono.js 的创始人
• Daishi Kato - Jotai 的创始人
• Fernando Rojo - Solito 的灵感来源
• Tanner Linsley - TanStack 的创始人
• Expo 开发团队 - 富有洞察力的办公时间

™️ 免责声明

T4应用与EquipmentShare或T3应用无关，也未得到它们的认可。

⚖️ 许可证

Create T4 App 使用 MIT 许可证 授权。