@orchard9ai/create-vite-vike-tauri

@orchard9ai/create-vite-vike-tauri

Create modern Vite + Vike + Tauri applications with Orchard9 design system

🚀 Quick Start

Create a new Tauri application with a single command:

npx @orchard9ai/create-vite-vike-tauri@latest

Or with a project name:

npx @orchard9ai/create-vite-vike-tauri my-app

📋 Prerequisites

Before using this generator, ensure you have:

• Node.js 18.0.0 or higher
• pnpm (will be installed automatically if missing)
• Rust 1.82.0 or higher (for Tauri)
• Platform Tools (optional):
  • macOS: Xcode for iOS development
  • All platforms: Android Studio for Android development

🎯 Features

• ⚡ Vite - Lightning fast build tool
• 🚀 Vike - Flexible SSR framework with multi-page routing and error pages
• 🦀 Tauri 2.0 - Build smaller, faster, more secure apps
• 🎨 Orchard9 Design System - Pre-configured Grove themes with theme switching
• 🎯 TypeScript - Type-safe by default
• 🎨 TailwindCSS v4 - Modern CSS framework with DaisyUI-style utilities
• 📱 Mobile Support - iOS and Android (optional)
• 🧪 Testing Setup - Vitest pre-configured
• ♿ Accessibility - Focus states, skip navigation, ARIA compliance
• 🔍 SEO Ready - Interactive SEO setup with meta tags, Open Graph, Twitter Cards
• 🔧 Best Practices - ESLint, Prettier, Husky

🛠️ Options

Interactive Mode

Simply run the command and follow the prompts:

npx @orchard9ai/create-vite-vike-tauri

Command Line Options

npx @orchard9ai/create-vite-vike-tauri my-app [options]

Options:
  --vike              Add Vike SSR support
  --mobile            Add iOS/Android support
  --skip-install      Skip dependency installation
  --skip-git          Skip git initialization
  --dry-run           Preview without creating files
  --pnpm              Use pnpm (default)
  --npm               Use npm
  --yarn              Use yarn
  -h, --help          Display help
  -V, --version       Display version

📁 Generated Project Structure

my-app/
├── src/                    # Application source code
│   ├── components/         # React components
│   │   ├── SplashScreen.tsx    # Loading splash screen
│   │   ├── WelcomeScreen.tsx   # Welcome screen
│   │   └── Navigation.tsx      # Main navigation (if Vike)
│   ├── hooks/              # Custom React hooks
│   ├── pages/              # Page components (if Vike)
│   │   ├── +Layout.tsx         # Root layout with theme provider
│   │   ├── index/              # Landing page
│   │   ├── about/              # About page
│   │   └── terms/              # Terms page
│   ├── stores/             # State management (Zustand)
│   ├── styles/             # Global styles
│   ├── utils/              # Utility functions
│   ├── App.tsx             # Main app component
│   └── main.tsx            # Application entry point
├── src-tauri/              # Tauri backend (Rust)
│   ├── src/                # Rust source code
│   ├── capabilities/       # Tauri permissions
│   ├── icons/              # App icons
│   ├── Cargo.toml          # Rust dependencies
│   └── tauri.conf.json     # Tauri configuration
├── public/                 # Static assets
├── index.html              # HTML entry point
├── package.json            # Node.js dependencies
├── tsconfig.json           # TypeScript config
├── vite.config.ts          # Vite configuration
├── tailwind.config.js      # TailwindCSS config
├── .gitignore              # Git ignore rules
└── README.md               # Project documentation

🏃 Development Workflow

After creating your project:

# Navigate to project
cd my-app

# Start development server
pnpm tauri:dev

# Run tests
pnpm test

# Build for production
pnpm tauri:build

Mobile Development

If you added mobile support:

# iOS development (macOS only)
pnpm tauri:ios dev

# Android development
pnpm tauri:android dev

🎨 Included Features

Orchard9 Design System

• Pre-configured Grove Light/Dark themes with automatic persistence
• Theme switching with onThemeChange callbacks
• TailwindCSS v4 with DaisyUI-style utilities
• Comprehensive accessibility with focus-visible states
• Loading state patterns and splash screen
• Skip navigation for screen readers

SEO & Performance

• Interactive SEO configuration during project setup
• Page-specific meta tags for title and description
• Open Graph tags for social media sharing
• Twitter Card support for Twitter sharing
• Structured favicon and theme color setup
• Custom error pages (404 and application errors)
• Search engine optimization with robots meta tags

Development Tools

• TypeScript - Full type safety
• Vitest - Fast unit testing
• ESLint - Code linting
• Prettier - Code formatting
• Husky - Git hooks

Tauri Features

• Secure CSP configuration
• Shell plugin for system operations
• Logging utilities
• Platform detection
• Hot module replacement

🔧 Configuration

Environment Variables

Create a .env file for configuration:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Tauri App

Tauri Configuration

Edit src-tauri/tauri.conf.json for:

• Window settings
• Security policies
• Bundle configuration
• App metadata

🐛 Troubleshooting

Common Issues

• Rust not found

  curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
  

• Node version too old

  # Install Node 18+ via nvm
  nvm install 18
  nvm use 18
  

• Mobile build fails

  • iOS: Ensure Xcode is installed and updated
  • Android: Set ANDROID_HOME environment variable

Debug Mode

Run with debug output:

DEBUG=* npx @orchard9ai/create-vite-vike-tauri my-app

📚 Examples

Basic Desktop App

npx @orchard9ai/create-vite-vike-tauri desktop-app

SSR-Enabled App

npx @orchard9ai/create-vite-vike-tauri ssr-app --vike

Full-Featured Mobile App

npx @orchard9ai/create-vite-vike-tauri mobile-app --vike --mobile

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📄 License

MIT © Orchard9

🔗 Links

• Tauri Documentation
• Vike Documentation
• Vite Documentation
• Orchard9 Design System

Built with ❤️ by the Orchard9 team