Show HN: 동일한 코드베이스에서 데스크톱, 웹 및 모바일 앱을 구축하기 위한 템플릿
hackernews
|
|
💼 비즈니스
#tntstack
#모바일 앱
#웹 개발
#크로스플랫폼
#템플릿
원문 출처: hackernews · Genesis Park에서 요약 및 분석
요약
하나의 코드베이스로 웹, 데스크톱, 모바일 애플리케이션을 모두 구축할 수 있는 템플릿인 TNTStack이 공개되었습니다. Tauri와 Next.js를 기반으로 하며 윈도우, macOS, 리눅스, 안드로이드, iOS 등 다양한 플랫폼에서 동일한 UI와 로직을 공유합니다. CLI를 통해 프로젝트를 쉽게 생성하고 통합된 개발 환경에서 앱을 빠르게 시작할 수 있습니다.
본문
The solid stack for building cross-platform apps. Write your code once and build for Web, Desktop, and Mobile. Powered by Tauri and Next.js in a single monorepo. TNTStack is a starting point for building cross-platform apps. It covers Web, Desktop (Windows, macOS, Linux), and Mobile (Android, iOS) from the same shared UI, themes, and logic. Run the CLI, scaffold your project, and start building. - Unified - One codebase, every platform. Web and native share the same pages, components, and state through packages/core andpackages/ui . - Ready - 40+ themes, 10 languages, CI/CD, and a scaffolding CLI out of the box. - Portable - Run npm create @tntstack/app , brand your project, and own the code. No lock-in. - Strict - End-to-end TypeScript, shared lint rules, and automated releases keep things solid. - Cross-Platform - Single codebase deploys to web, desktop, and mobile - Shared Architecture - Design system primitives in packages/ui , business logic and pages inpackages/core - 40+ Themes - Light and dark variants of 40+ color schemes, plus custom theming support - 10 Languages - Type-safe i18n works with both SSR (web) and static export (native) - PWA - Offline support, precaching, and runtime caching strategies for the web app - Landing Page - Pre-built, SEO-optimized marketing pages designed to pitch your product - Docs Page - Integrated, MDX-powered documentation architecture ready for your technical guides - Scaffolding CLI - npm create @tntstack/app sets up a branded, configured project - Turborepo - Dependency-aware builds and caching - TypeScript - Strict, end-to-end type safety with shared configs - CI/CD - GitHub Actions + Release Please for automated builds and versioning Note Building native apps requires additional platform-specific tools (e.g., Xcode, Android Studio, C++ Build Tools). See our Docs or Tauri's Prerequisites Guide for details. npm create @tntstack/app@latest Using other package managers pnpm create @tntstack/app@latest yarn create @tntstack/app npx @tntstack/create-app bunx @tntstack/create-app The CLI configures your project name, identifiers, and versions. It can also initialize git and install dependencies for you. cd # Run this only if you skipped dependency installation during scaffolding pnpm install pnpm dev This starts both the web app (http://localhost:3000) and the native desktop app in parallel. Important GitHub Actions & Release Please: For the automated release pipelines and changelog generation to function properly, you must configure the following repository settings: - Workflow Permissions (Settings > Actions > General): Grant Read and write permissions and check Allow GitHub Actions to create and approve pull requests. - Pull Request Merging (Settings > General): To maintain the required linear git history for the release bot, uncheck Allow merge commits andAllow rebase merging . Leave onlyAllow squash merging checked, and set the default commit message toPull request title . apps/ web/ → Next.js SSR — web app, landing page, docs, PWA native/ → Next.js (Static) + Tauri 2 — desktop & mobile packages/ core/ → Business logic: pages, stores, hooks, providers, config ui/ → Design system: shadcn/ui primitives, themes, styles i18n/ → 10-language type-safe translations (SSR & static) cli/ → Scaffolding tool (npm create @tntstack/app) eslint-config/ → Shared ESLint rules (Flat Config) typescript-config/ → Shared TypeScript configs Both web and native import pages, layouts, and state from packages/core , and design system primitives from packages/ui . The web app runs with SSR and PWA support. The native app uses a static HTML export served by Tauri's Rust backend. | Platform | Status | Links | |---|---|---| | 🌐 Web | ✅ Available | Live Demo | | 📱 PWA | ✅ Available | Live Demo | | 🪟 Windows | ✅ Available | Download Demo | | 🍎 macOS | ✅ Available | Download Demo | | 🐧 Linux | ✅ Available | Download Demo | | 🤖 Android | ✅ Available | Download Demo | | 📱 iOS | ✅ Available | Download Demo | pnpm dev # Start all apps in dev mode pnpm build # Build everything pnpm lint # Lint all packages pnpm check-types # TypeScript validation across all workspaces pnpm web dev # Web app only pnpm tauri dev # Desktop app only pnpm tauri android dev # Android app pnpm tauri ios dev # iOS app pnpm shadcn add # Add shadcn/ui components to packages/ui pnpm clean # Clean all build outputs For setup guides, architecture, theming, i18n, deployment and more, see Documentation See CONTRIBUTING.md.
Genesis Park 편집팀이 AI를 활용하여 작성한 분석입니다. 원문은 출처 링크를 통해 확인할 수 있습니다.
공유