shyam-chen / tauri-starter

🔗 A boilerplate for native applications with Tauri and Xcode using TypeScript on Vite.

Tauri Starter

🔗 A boilerplate for native applications with Tauri and Xcode using TypeScript on Vite.

🌈 View Demo: Live | Windows | macOS | Android | iOS

Source Code: Web-side | Native-side | Server-side | Cloud-side

Table of Contents

• Getting Started
• Project Setup
• Key Features
• Configuration
• Directory Structure

Getting Started

Prerequisites:

• Node.js v20
• PNPM v9
• Tauri v2

Get started with Tauri Starter.

# install dependencies
$ pnpm install

# dev server (in one terminal)
# the default is to run it on macOS
$ pnpm dev:mobile
# or
$ pnpm dev:desktop

# mock server (in another terminal)
$ pnpm mock

Or use barebones scaffolding for your new Tauri app

$ pnpm dlx degit Shyam-Chen/Barebones-Templates/tauri my-tauri-app

Project Setup

Follow steps to execute this boilerplate.

Install dependencies

$ pnpm install

iOS

$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
$ xcrun -f devicectl

$ pnpm tauri ios init
# Xcode -> Open Developer Tool -> Simulator -> File -> Open Simulator -> iPhone Pro
$ pnpm tauri ios dev
# Detected iOS simulators:
#   [1] iPhone
#   [2] iPhone Plus
#   [3] iPhone Pro
#   [4] iPhone Pro Max
#   Enter an index for a simulator above.
# Simulator: 3

$ pnpm clean:ios
$ pnpm tauri ios init
$ pnpm tauri ios build

macOS

$ pnpm tauri dev

$ pnpm tauri build

Android

$ cd Library/Android/sdk/ndk/
$ ls
# 26.2.11394342

export NDK_HOME="$ANDROID_HOME/ndk/26.2.11394342"

$ pnpm tauri android init
$ pnpm tauri android dev
# select emulator

$ pnpm clean:android
$ pnpm tauri android init
$ pnpm tauri android build

Windows

$ pnpm tauri dev

$ pnpm tauri build

Mock APIs during development

$ pnpm mock

Key Features

This seed repository provides the following features:

• ---------- Essentials ----------
• Tauri - Native Apps Framework
• Vue - User Interface Framework
• Router - Routing
• Routes - File-based Routing
• Storer - State Management
• Formor - Form Validation
• Valibot - Schema Validation
• Localer - Internationalization and Localization
• Use - Composition Utilities
• Qrcode Image - QR Code Generation
• Lodash - JavaScript Utilities
• Date Fns - Date Utilities
• UnoCSS - CSS Utilities
• Iconify - Icon Utilities
• Tiptap - Rich Text Editor
• ECharts - Data Visualization
• ---------- Tools ----------
• Vite - Bundler
• TypeScript - JavaScript with Syntax for Types
• Sassy CSS - CSS Extension
• Biome - Formatter and Linter
• ESLint - Linter
• Prettier - Formatter
• Vitest - Test Runner
• WebdriverIO - Test Automation
• Appium - WebDriver Protocol Mobile Test Automation
• ---------- Environments ----------
• Node.js - JavaScript Runtime Environment
• Pnpm - Package Manager
• GitHub Actions - Continuous Integration and Delivery
• Tauri GitHub Action - Native Binary

Directory Structure

The structure follows the LIFT Guidelines.

.
├── .github/workflows
│   ├── ci.yaml
│   └── publish.yaml
├── app
│   ├── public
│   ├── src
│   │   ├── assets
│   │   ├── components
│   │   ├── composables
│   │   ├── layouts
│   │   ├── locales
│   │   ├── middleware
│   │   ├── plugins
│   │   ├── routes
│   │   ├── utilities
│   │   ├── workers
│   │   ├── App.vue
│   │   ├── main.ts
│   │   └── shims.d.ts
│   ├── index.html
│   ├── package.json
│   ├── tsconfig.json
│   └── vite.config.ts
├── docs -> Write documentation with VitePress
│   ├── .vitepress
│   ├── index.md
│   ├── package.json
│   └── vite.config.ts
├── e2e -> End-to-end testing
│   ├── src
│   ├── package.json
│   ├── playwright.config.ts
│   └── tsconfig.json
├── mock -> Mock backend API
│   ├── src
│   ├── package.json
│   ├── tsconfig.json
│   └── vite.config.ts
├── ui -> Design system
│   ├── src
│   ├── package.json
│   ├── tsconfig.json
│   └── vite.config.ts
├── .editorconfig
├── .gitignore
├── eslint.config.js
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── prettier.config.js
└── README.md